<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
  <meta name="theme-color" content="#222">
  <meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#222">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>
  <script id="hexo-configurations">
    var NexT = window.NexT ||
    {};
    var CONFIG = {
      "hostname": "cuiqingcai.com",
      "root": "/",
      "scheme": "Pisces",
      "version": "7.8.0",
      "exturl": false,
      "sidebar":
      {
        "position": "right",
        "width": 360,
        "display": "post",
        "padding": 18,
        "offset": 12,
        "onmobile": false,
        "widgets": [
          {
            "type": "image",
            "name": "阿布云",
            "enable": false,
            "url": "https://www.abuyun.com/http-proxy/introduce.html",
            "src": "https://qiniu.cuiqingcai.com/88au8.jpg",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "天验",
            "enable": true,
            "url": "https://tutorial.lengyue.video/?coupon=12ef4b1a-a3db-11ea-bb37-0242ac130002_cqx_850",
            "src": "https://qiniu.cuiqingcai.com/bco2a.png",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "华为云",
            "enable": false,
            "url": "https://activity.huaweicloud.com/2020_618_promotion/index.html?bpName=5f9f98a29e2c40b780c1793086f29fe2&bindType=1&salesID=wangyubei",
            "src": "https://qiniu.cuiqingcai.com/y42ik.jpg",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "张小鸡",
            "enable": false,
            "url": "http://www.zxiaoji.com/",
            "src": "https://qiniu.cuiqingcai.com/fm72f.png",
            "width": "100%"
      },
          {
            "type": "image",
            "name": "Luminati",
            "src": "https://qiniu.cuiqingcai.com/ikkq9.jpg",
            "url": "https://luminati-china.io/?affiliate=ref_5fbbaaa9647883f5c6f77095",
            "width": "100%",
            "enable": false
      },
          {
            "type": "image",
            "name": "IPIDEA",
            "url": "http://www.ipidea.net/?utm-source=cqc&utm-keyword=?cqc",
            "src": "https://qiniu.cuiqingcai.com/0ywun.png",
            "width": "100%",
            "enable": true
      },
          {
            "type": "tags",
            "name": "标签云",
            "enable": true
      },
          {
            "type": "categories",
            "name": "分类",
            "enable": true
      },
          {
            "type": "friends",
            "name": "友情链接",
            "enable": true
      },
          {
            "type": "hot",
            "name": "猜你喜欢",
            "enable": true
      }]
      },
      "copycode":
      {
        "enable": true,
        "show_result": true,
        "style": "mac"
      },
      "back2top":
      {
        "enable": true,
        "sidebar": false,
        "scrollpercent": true
      },
      "bookmark":
      {
        "enable": false,
        "color": "#222",
        "save": "auto"
      },
      "fancybox": false,
      "mediumzoom": false,
      "lazyload": false,
      "pangu": true,
      "comments":
      {
        "style": "tabs",
        "active": "gitalk",
        "storage": true,
        "lazyload": false,
        "nav": null,
        "activeClass": "gitalk"
      },
      "algolia":
      {
        "hits":
        {
          "per_page": 10
        },
        "labels":
        {
          "input_placeholder": "Search for Posts",
          "hits_empty": "We didn't find any results for the search: ${query}",
          "hits_stats": "${hits} results found in ${time} ms"
        }
      },
      "localsearch":
      {
        "enable": true,
        "trigger": "auto",
        "top_n_per_article": 10,
        "unescape": false,
        "preload": false
      },
      "motion":
      {
        "enable": false,
        "async": false,
        "transition":
        {
          "post_block": "bounceDownIn",
          "post_header": "slideDownIn",
          "post_body": "slideDownIn",
          "coll_header": "slideLeftIn",
          "sidebar": "slideUpIn"
        }
      },
      "path": "search.xml"
    };

  </script>
  <meta name="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
  <meta property="og:type" content="website">
  <meta property="og:title" content="静觅">
  <meta property="og:url" content="https://cuiqingcai.com/page/26/index.html">
  <meta property="og:site_name" content="静觅">
  <meta property="og:description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
  <meta property="og:locale" content="zh_CN">
  <meta property="article:author" content="崔庆才">
  <meta property="article:tag" content="崔庆才">
  <meta property="article:tag" content="静觅">
  <meta property="article:tag" content="PHP">
  <meta property="article:tag" content="Java">
  <meta property="article:tag" content="Python">
  <meta property="article:tag" content="Spider">
  <meta property="article:tag" content="爬虫">
  <meta property="article:tag" content="Web">
  <meta property="article:tag" content="Kubernetes">
  <meta property="article:tag" content="深度学习">
  <meta property="article:tag" content="机器学习">
  <meta property="article:tag" content="数据分析">
  <meta property="article:tag" content="网络">
  <meta property="article:tag" content="IT">
  <meta property="article:tag" content="技术">
  <meta property="article:tag" content="博客">
  <meta name="twitter:card" content="summary">
  <link rel="canonical" href="https://cuiqingcai.com/page/26/">
  <script id="page-configurations">
    // https://hexo.io/docs/variables.html
    CONFIG.page = {
      sidebar: "",
      isHome: true,
      isPost: false,
      lang: 'zh-CN'
    };

  </script>
  <title>静觅丨崔庆才的个人站点</title>
  <meta name="google-site-verification" content="p_bIcnvirkFzG2dYKuNDivKD8-STet5W7D-01woA2fc" />
  <noscript>
    <style>
      .use-motion .brand,
      .use-motion .menu-item,
      .sidebar-inner,
      .use-motion .post-block,
      .use-motion .pagination,
      .use-motion .comments,
      .use-motion .post-header,
      .use-motion .post-body,
      .use-motion .collection-header
      {
        opacity: initial;
      }

      .use-motion .site-title,
      .use-motion .site-subtitle
      {
        opacity: initial;
        top: initial;
      }

      .use-motion .logo-line-before i
      {
        left: initial;
      }

      .use-motion .logo-line-after i
      {
        right: initial;
      }

    </style>
  </noscript>
  <link rel="alternate" href="/atom.xml" title="静觅" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container">
    <div class="headband"></div>
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">
        <div class="site-brand-container">
          <div class="site-nav-toggle">
            <div class="toggle" aria-label="切换导航栏">
              <span class="toggle-line toggle-line-first"></span>
              <span class="toggle-line toggle-line-middle"></span>
              <span class="toggle-line toggle-line-last"></span>
            </div>
          </div>
          <div class="site-meta">
            <a href="/" class="brand" rel="start">
              <span class="logo-line-before"><i></i></span>
              <h1 class="site-title">静觅 <span class="site-subtitle"> 崔庆才的个人站点 </span>
              </h1>
              <span class="logo-line-after"><i></i></span>
            </a>
          </div>
          <div class="site-nav-right">
            <div class="toggle popup-trigger">
              <i class="fa fa-search fa-fw fa-lg"></i>
            </div>
          </div>
        </div>
        <nav class="site-nav">
          <ul id="menu" class="main-menu menu">
            <li class="menu-item menu-item-home">
              <a href="/" rel="section">首页</a>
            </li>
            <li class="menu-item menu-item-archives">
              <a href="/archives/" rel="section">文章列表</a>
            </li>
            <li class="menu-item menu-item-tags">
              <a href="/tags/" rel="section">文章标签</a>
            </li>
            <li class="menu-item menu-item-categories">
              <a href="/categories/" rel="section">文章分类</a>
            </li>
            <li class="menu-item menu-item-about">
              <a href="/about/" rel="section">关于博主</a>
            </li>
            <li class="menu-item menu-item-message">
              <a href="/message/" rel="section">给我留言</a>
            </li>
            <li class="menu-item menu-item-search">
              <a role="button" class="popup-trigger">搜索 </a>
            </li>
          </ul>
        </nav>
        <div class="search-pop-overlay">
          <div class="popup search-popup">
            <div class="search-header">
              <span class="search-icon">
                <i class="fa fa-search"></i>
              </span>
              <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off" placeholder="搜索..." spellcheck="false" type="search" class="search-input">
              </div>
              <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
              </span>
            </div>
            <div id="search-result">
              <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
      <span>0%</span>
    </div>
    <div class="reading-progress-bar"></div>
    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div class="content index posts-expand">
            <div class="carousel">
              <div id="wowslider-container">
                <div class="ws_images">
                  <ul>
                    <li><a target="_blank" href="https://cuiqingcai.com/5052.html"><img title="Python3网络爬虫开发实战教程" src="https://qiniu.cuiqingcai.com/ipy96.jpg" /></a></li>
                    <li><a target="_blank" href="https://t.lagou.com/fRCBRsRCSN6FA"><img title="52讲轻松搞定网络爬虫" src="https://qiniu.cuiqingcai.com/fqq5e.png" /></a></li>
                    <li><a target="_blank" href="https://brightdata.grsm.io/cuiqingcai"><img title="亮网络解锁器" src="https://qiniu.cuiqingcai.com/6qnb7.png" /></a></li>
                    <li><a target="_blank" href="https://cuiqingcai.com/4320.html"><img title="Python3网络爬虫开发视频教程" src="https://qiniu.cuiqingcai.com/bjrny.jpg" /></a></li>
                    <li><a target="_blank" href="https://cuiqingcai.com/5094.html"><img title="爬虫代理哪家强？十大付费代理详细对比评测出炉！" src="https://qiniu.cuiqingcai.com/nifs6.jpg" /></a></li>
                  </ul>
                </div>
                <div class="ws_thumbs">
                  <div>
                    <a target="_blank" href="#"><img src="https://qiniu.cuiqingcai.com/ipy96.jpg" /></a>
                    <a target="_blank" href="#"><img src="https://qiniu.cuiqingcai.com/fqq5e.png" /></a>
                    <a target="_blank" href="#"><img src="https://qiniu.cuiqingcai.com/6qnb7.png" /></a>
                    <a target="_blank" href="#"><img src="https://qiniu.cuiqingcai.com/bjrny.jpg" /></a>
                    <a target="_blank" href="#"><img src="https://qiniu.cuiqingcai.com/nifs6.jpg" /></a>
                  </div>
                </div>
                <div class="ws_shadow"></div>
              </div>
            </div>
            <link rel="stylesheet" href="/lib/wowslide/slide.css">
            <script src="/lib/wowslide/jquery.min.js"></script>
            <script src="/lib/wowslide/slider.js"></script>
            <script>
              jQuery("#wowslider-container").wowSlider(
              {
                effect: "cube",
                prev: "",
                next: "",
                duration: 20 * 100,
                delay: 20 * 100,
                width: 716,
                height: 297,
                autoPlay: true,
                playPause: true,
                stopOnHover: false,
                loop: false,
                bullets: 0,
                caption: true,
                captionEffect: "slide",
                controls: true,
                onBeforeStep: 0,
                images: 0
              });

            </script>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1835.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> JavaScript <i class="label-arrow"></i>
                  </a>
                  <a href="/1835.html" class="post-title-link" itemprop="url">多说默认头像不显示，那就自己来整一个</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
                  <p>今天发现博客评论的默认头像不显示了，博客使用的是多说评论，不知道啥情况，之前设置过一个默认头像，然而今天图片都加载不出来了，可对于我这种强迫症来说，这能忍吗？你能忍我也不能忍啊，这必须不能忍啊，看到一个个的红叉号简直刺透了心。于是，我决定，必须要干掉它！</p>
                  <h2 id="初步尝试"><a href="#初步尝试" class="headerlink" title="初步尝试"></a>初步尝试</h2>
                  <p>默认头像不行了，我就重新上传个默认头像对吧，简单粗暴易行。来来来，说试就试！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525114559.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525114559.jpg" alt="20150525114559"></a> 然而上传完毕之后，它是这个样子滴，依然不给我面子！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525114655.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525114655.jpg" alt="20150525114655"></a> 你在逗我吗？是不是多说服务器哪里出毛病了？</p>
                  <h2 id="究其原因"><a href="#究其原因" class="headerlink" title="究其原因"></a>究其原因</h2>
                  <p>然而，美好的事情总是意想不到的发生，当我知道真相的一刻，整个人都惊呆了。 浏览器里审查一下元素，看它到底引用了神马鬼。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525115038.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525115038.jpg" alt="20150525115038"></a> 好，我就打开这个链接，惊呆了。简直棒到无极限！ 域名已过期！域名已过期！域名已过期！重要的话说三遍！简直溜到不行！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525115447.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525115447.jpg" alt="20150525115447"></a> 好吧，这真是太棒了！！我还能说些什么！！！</p>
                  <h2 id="峰回路转"><a href="#峰回路转" class="headerlink" title="峰回路转"></a>峰回路转</h2>
                  <p>行，既然这样，那我自己提供CDN，用我自己的七牛云存储！ 那就用jQuery好了，方便简单，在&lt;/head&gt;标签前面加上这么个代码，来试试。</p>
                  <figure class="highlight javascript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	$(<span class="string">'.ds-avatar img[src*="cdncache"]'</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		$(<span class="keyword">this</span>).attr(<span class="string">"src"</span>,<span class="string">'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112155.jpg'</span>);</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>意思是，在页面加载完成之后，把src里面包含cdncache的多说头像img替换掉。 这句话最好加在所有JS的最后面，要不然可能不会生效。JS执行是有先后顺序的。 这样，我们就会发现，头像已经奇迹般地发生了变化。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525123151.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525123151.jpg" alt="20150525123151"></a> 本身有头像的仍然是那个头像，使用默认头像的已经替换了新头像。</p>
                  <h2 id="更上一层"><a href="#更上一层" class="headerlink" title="更上一层"></a>更上一层</h2>
                  <p>然而这并不能满足我的愿望啊，我想要多变的头像样式，就是这么任性！ 来来来，改代码，我再传上几个头像，让默认头像的孩纸们随机地使用我的头像，一定是炫爆了！</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">	<span class="keyword">var</span> imgs = <span class="keyword">new</span> <span class="built_in">Array</span>();</span></span><br><span class="line"><span class="actionscript">	imgs[<span class="number">0</span>] = <span class="string">'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525111154.jpg'</span>;</span></span><br><span class="line"><span class="actionscript">	imgs[<span class="number">1</span>] = <span class="string">'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525111447.jpg'</span>;</span></span><br><span class="line"><span class="actionscript">	imgs[<span class="number">2</span>] = <span class="string">'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112058.jpg'</span>;</span></span><br><span class="line"><span class="actionscript">	imgs[<span class="number">3</span>] = <span class="string">'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112112.jpg'</span>;</span></span><br><span class="line"><span class="actionscript">	imgs[<span class="number">4</span>] = <span class="string">'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112129.jpg'</span>;</span></span><br><span class="line"><span class="actionscript">	imgs[<span class="number">5</span>] = <span class="string">'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112155.jpg'</span>;</span></span><br><span class="line"><span class="javascript">	$(<span class="string">'.ds-avatar img[src*="cdncache"]'</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> rand = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*imgs.length);</span></span><br><span class="line"><span class="javascript">		$(<span class="keyword">this</span>).attr(<span class="string">"src"</span>,imgs[rand]);</span></span><br><span class="line">	&#125;)</span><br><span class="line">&#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>嗯，把刚才代码优化成这样，我们就可以发现，整个网站的头像就被替换成我们想要的效果了！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525123537.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525123537.jpg" alt="20150525123537"></a> 简直酷炫！小伙伴们可以尝试一下！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-05-25 12:37:04" itemprop="dateCreated datePublished" datetime="2015-05-25T12:37:04+08:00">2015-05-25</time>
                </span>
                <span id="/1835.html" class="post-meta-item leancloud_visitors" data-flag-title="多说默认头像不显示，那就自己来整一个" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>1.7k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>2 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1802.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1802.html" class="post-title-link" itemprop="url">OpenGL绘图实例八之图形的移动删除存盘</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>在上一篇文章中我们已经实现了图形的取点绘制，接下来我们还要实现的功能有图形的删除、移动以及存盘读盘功能。 概述如下</p>
                  <ul>
                    <li>鼠标点击某个绘制的图形，将其删除</li>
                    <li>鼠标拖动某个图形，可以对其随意拖拽改变位置</li>
                    <li>点击存盘，将图形的位置及颜色保存到文件</li>
                    <li>点击读盘，将图形的位置颜色从文件中读取出来并重新绘制</li>
                  </ul>
                  <p>好，接下来我们在上一篇的基础上进行一步步的说明。</p>
                  <h2 id="图形删除"><a href="#图形删除" class="headerlink" title="图形删除"></a>图形删除</h2>
                  <p>首先像之前一样，我们定义一个删除的按钮，指定好颜色。</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">GLubyte delBtn[<span class="number">3</span>] = &#123;<span class="number">30</span>, <span class="number">30</span>, <span class="number">30</span>&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在display函数中绘制一个删除的按钮</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glColorCircle(<span class="number">220</span>, <span class="number">280</span>, <span class="number">10</span>, delBtn);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>顶部变变成了这个样子，其中最左边的那个按钮便是删除按钮 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150511124225.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150511124225.jpg" alt="QQ截图20150511124225"></a> 接下来我们想一下删除的实现。 首先我们点击删除按钮之后要设置一下drawStatus，比如设置为2代表删除。 然后鼠标点击下方任意位置时，如果当前drawStatus为2，如果鼠标处在一个多边形内部，我们就把它删除掉。 那么就会出现两个问题了，怎样判断点击的点处在多边形的内部？怎样执行删除操作？ 下面我们分别来研究一下</p>
                  <h3 id="1-判断点在多边形内部"><a href="#1-判断点在多边形内部" class="headerlink" title="1. 判断点在多边形内部"></a>1. 判断点在多边形内部</h3>
                  <p>思路：求解通过该点的水平线与多边形各边的交点 ，如果交点为奇数，那么就判定为在多边形内部，否则在外部。 因此，我的算法实现如下，传入的参数一个是ploygon结构体，结构体中包含了顶点坐标，另外就是这个点的x，y坐标。 思路参考来源： <a href="http://blog.csdn.net/hgl868/article/details/7947272" target="_blank" rel="noopener">判断点在多边形内的多种写法</a> 经过我的改写，变成了如下内容</p>
                  <figure class="highlight smali">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">/* 判断一个点是否在多边形内部 */</span><br><span class="line">bool pointInPoly(polygon poly,<span class="built_in"> int </span>x,<span class="built_in"> int </span>y)&#123;</span><br><span class="line"><span class="built_in">	int </span>nCross = 0;</span><br><span class="line">	for (int i = 0; i &lt; poly.verNum; i++) &#123;</span><br><span class="line">	<span class="built_in">	int </span>p1x = poly.x[i];</span><br><span class="line">	<span class="built_in">	int </span>p1y = poly.y[i];</span><br><span class="line">	<span class="built_in">	int </span>p2x = poly.x[(i + 1) % poly.verNum];</span><br><span class="line">	<span class="built_in">	int </span>p2y = poly.y[(i + 1) % poly.verNum];</span><br><span class="line">		/* 平行或在延长线上，忽略 */</span><br><span class="line">	<span class="built_in">	if </span>(p1y == p2y || y &lt; min(p1y, p2y) || y &gt; max(p1y, p2y)) &#123;</span><br><span class="line">			continue;</span><br><span class="line">		&#125;</span><br><span class="line">		/* 计算交点横坐标 */</span><br><span class="line">	<span class="built_in">	double </span>m = (double)(y - p1y) * (double)(p2x - p1x) / (double)(p2y - p1y) + p1x; </span><br><span class="line">	<span class="built_in">	if </span>( m &gt; x ) nCross++; </span><br><span class="line">	&#125;</span><br><span class="line"><span class="built_in">	return </span>(nCross % 2 == 1); </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是判断在多边形内部的算法。</p>
                  <h3 id="2-删除图形实现"><a href="#2-删除图形实现" class="headerlink" title="2.删除图形实现"></a>2.删除图形实现</h3>
                  <p>好了，有了上面的算法，我们就依次查找我们声明的 polygons 数组，找到第一个符合要求的多边形结构体 polygon 返回它的索引。 这个方法就是传入了点击点的位置x，y坐标，然后判断是在哪个多边形内，然后移除之。如果没有找到，则不执行删除操作。</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 删除多边形 */</span></span><br><span class="line">void delete<span class="constructor">Poly(<span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span> &#123;</span><br><span class="line">	<span class="built_in">int</span> delenum = -<span class="number">1</span>;</span><br><span class="line">	for (<span class="built_in">int</span> i = <span class="number">0</span>; i&lt; con; i++) &#123;</span><br><span class="line">		<span class="keyword">if</span> (point<span class="constructor">InPoly(<span class="params">polygons</span>[<span class="params">i</span>], <span class="params">x</span>, <span class="params">y</span>)</span>) &#123;</span><br><span class="line">			delenum = i;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (delenum != -<span class="number">1</span>) &#123;</span><br><span class="line">		remove<span class="constructor">Poly(<span class="params">delenum</span>)</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 重新绘制 */</span></span><br><span class="line">	glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>其中 removePoly(delenum) 就是通过传入这个结构体的索引，然后将它从polygons里面删除即可，方法实现如下</p>
                  <figure class="highlight pgsql">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 删除多边形 */</span></span><br><span class="line"><span class="type">void</span> removePoly(<span class="type">int</span> <span class="keyword">index</span>)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">index</span>&gt;con) &#123;</span><br><span class="line">		printf("Out Of Index\n");</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">for</span> (<span class="type">int</span> i = <span class="keyword">index</span>; i &lt; con; i++) &#123;</span><br><span class="line">		polygons[i] = polygons[i+<span class="number">1</span>];</span><br><span class="line">	&#125;</span><br><span class="line">	con<span class="comment">--;</span></span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>其实就是相当于从数组中移除一个元素，然后后面的元素依次前移。 恩好了，准备工作都做好了，我们只需要在点击了删除按钮之后，调用一下deletePoly函数即可。 把原来的mouseClick方法改写如下即可，代码较长，不完全展开，<strong>双击查看完整代码</strong></p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line">void mouse<span class="constructor">Click(<span class="params">int</span> <span class="params">btn</span>, <span class="params">int</span> <span class="params">state</span>, <span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="built_in">int</span> optionHeight = <span class="number">40</span>;</span><br><span class="line">	<span class="built_in">int</span> optionWidth = <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> (btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &lt; optionWidth)</span><br><span class="line">		&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">nowColor</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor<span class="literal">[<span class="number">0</span>]</span>, nowColor<span class="literal">[<span class="number">1</span>]</span>, nowColor<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			gl<span class="constructor">ColorCircle(-180, 280, 10, <span class="params">nowColor</span>)</span>;</span><br><span class="line">		<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &gt; optionWidth) &#123;</span><br><span class="line">			<span class="comment">//取当前的点</span></span><br><span class="line">			GLubyte color<span class="literal">[<span class="number">3</span>]</span>;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">color</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, color<span class="literal">[<span class="number">0</span>]</span>, color<span class="literal">[<span class="number">1</span>]</span>, color<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 如果点击了开始绘制的按钮 */</span></span><br><span class="line">			<span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">startBtn</span>)</span>) &#123;</span><br><span class="line">				drawStatus = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 开始画一个图形，顶点个数置零 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum = <span class="number">0</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			<span class="comment">/* 如果点击了结束绘制的按钮 */</span></span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">endBtn</span>)</span>) &#123;</span><br><span class="line">				glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">				<span class="comment">/* 画的图形个数加一 */</span></span><br><span class="line">				con++;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">delBtn</span>)</span>) &#123;</span><br><span class="line">				<span class="comment">/* 删除时设置drawStatus为2 */</span></span><br><span class="line">				drawStatus = <span class="number">2</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">		<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="comment">/* 如果当前是正在取点状态 */</span></span><br><span class="line">			<span class="keyword">if</span> (drawStatus<span class="operator"> == </span><span class="number">0</span>)</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 保存每个点，然后该图形顶点个数加一 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.x<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= x;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.y<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= y;</span><br><span class="line">				<span class="comment">/* 画点 */</span></span><br><span class="line">				gl<span class="constructor">Points(<span class="params">x</span>, <span class="params">y</span>)</span>;</span><br><span class="line">				<span class="comment">/* 设置当前颜色RGB，如果取色有变动，以最后的取色为准 */</span> </span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">0</span>]</span> = nowColor<span class="literal">[<span class="number">0</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">1</span>]</span> = nowColor<span class="literal">[<span class="number">1</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">2</span>]</span> = nowColor<span class="literal">[<span class="number">2</span>]</span>;</span><br><span class="line">				printf(<span class="string">"polyColor%d%d%d\n"</span>, polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">0</span>]</span>,polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">1</span>]</span>,polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum++;</span><br><span class="line">				printf(<span class="string">"con:%d,verNum:%d\n"</span>, con, polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum);</span><br><span class="line">			&#125;<span class="keyword">else</span> <span class="keyword">if</span> (drawStatus<span class="operator"> == </span><span class="number">2</span>) &#123;</span><br><span class="line">				<span class="comment">/* 删除图形 */</span></span><br><span class="line">				delete<span class="constructor">Poly(<span class="params">x</span>, <span class="params">y</span>)</span>;</span><br><span class="line">			&#125; </span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过上面的步骤，我们便可以很方便地实现图形的删除了。运行结果如下</p>
                  <p>[embed]<a href="http://qiniu.cuiqingcai.com/robot2.mp4[/embed" target="_blank" rel="noopener">http://qiniu.cuiqingcai.com/robot2.mp4[/embed</a>]</p>
                  <p>嗯，就是这样，现在删除就大功告成了。</p>
                  <h2 id="移动图形"><a href="#移动图形" class="headerlink" title="移动图形"></a>移动图形</h2>
                  <p>像之前一样，定义一个移动图形的按钮。在此不再赘述</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">GLubyte moveBtn[<span class="number">3</span>] = &#123;<span class="number">40</span>, <span class="number">40</span>, <span class="number">40</span>&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glColorCircle(<span class="number">190</span>, <span class="number">280</span>, <span class="number">10</span>, moveBtn);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>那么图形移动怎么实现？思路如下 首先利用判断点击的点是否在多边形内部的算法，找到需要移动的多边形。然后在监听鼠标移动的事件中设置这个多边形各个顶点的相对移动距离等于鼠标相对移动距离即可。 首先，移动的drawSatus我们设置为3，在mouseClick方法中加入如下部分，在哪加你应该已经知道了。</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">moveBtn</span>)</span>) &#123;</span><br><span class="line">				<span class="comment">/* 移动时设置drawStatus为3 */</span></span><br><span class="line">				drawStatus = <span class="number">3</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在mouseMove方法中（另一个监听鼠标移动的事件）中首先判断当前的drawStatus如果为3，那么就执行移动操作。 加入如下的方法即可。</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 鼠标移动事件 */</span></span><br><span class="line">void mouse<span class="constructor">Move(<span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">if</span>(drawStatus<span class="operator"> == </span><span class="number">3</span><span class="operator"> &amp;&amp; </span>moveNum != -<span class="number">1</span>)&#123;</span><br><span class="line">		printf(<span class="string">"move x:%d,y:%dmoveNum:%d\n"</span>, x, y,moveNum);</span><br><span class="line">		move<span class="constructor">Poly(<span class="params">x</span>, <span class="params">y</span>)</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这里两点需要说明，moveNum就是我们需要移动的图形的索引，定义为了全局变量。在鼠标点击时，首先判定点击点在哪个图形中，然而因为有两个鼠标事件（一个是点击，一个是移动），所以就把这个变量定义为全局变量，来标记该移动哪个图形。moveNum的初始值为-1，如果为-1，那么就代表没有选中任何图形，不移动。如果不是-1，就进行移动。 其次，movePloy方法实现如下</p>
                  <figure class="highlight gml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 移动多边形 */</span></span><br><span class="line">void movePoly(int <span class="symbol">x</span>, int <span class="symbol">y</span>) &#123;</span><br><span class="line">	<span class="comment">/* 取到要移动的图形 */</span></span><br><span class="line">	int verNum = polygons[moveNum].verNum;</span><br><span class="line">	printf(<span class="string">"verNum%d,x%d,y%d,clickX%d,clickY%d\n"</span>,verNum,<span class="symbol">x</span>,<span class="symbol">y</span>,clickX,clickY);</span><br><span class="line">	<span class="keyword">for</span> (int i = <span class="number">0</span>; i &lt; verNum; i++) &#123;</span><br><span class="line">		polygons[moveNum].<span class="symbol">x</span>[i] += (<span class="symbol">x</span> - clickX);</span><br><span class="line">		polygons[moveNum].<span class="symbol">y</span>[i] += (<span class="symbol">y</span> - clickY); </span><br><span class="line">		printf(<span class="string">"polyx%d\n"</span>,polygons[moveNum].<span class="symbol">x</span>[i]);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 移动完毕之后重新记录当前的点 */</span></span><br><span class="line">	clickX = <span class="symbol">x</span>;</span><br><span class="line">	clickY = <span class="symbol">y</span>;</span><br><span class="line">	<span class="comment">/* 重新绘制 */</span></span><br><span class="line">	glutPostRedisplay();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这个方法的实现有一部分需要说明，首先是clickX，clickY。 因为在移动时移动的是相对距离。所以，鼠标每移动一个像素，我们就要计算下一步鼠标移动的位置和上一个位置的差值，所以每次移动我们都需要标记一下点击的位置。所以上面的方法中才有了</p>
                  <figure class="highlight gml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 移动完毕之后重新记录当前的点 */</span></span><br><span class="line">	clickX = <span class="symbol">x</span>;</span><br><span class="line">	clickY = <span class="symbol">y</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>然后，在图形移动时，我们需要移动的是相对位置。所以我们将一个图形的所有顶点进行遍历，加上鼠标移动的相对位置即可。就是如下的实现</p>
                  <figure class="highlight lisp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">for (<span class="name">int</span> i = <span class="number">0</span><span class="comment">; i &lt; verNum; i++) &#123;</span></span><br><span class="line">		polygons[moveNum].x[i] += (<span class="name">x</span> - clickX)<span class="comment">;</span></span><br><span class="line">		polygons[moveNum].y[i] += (<span class="name">y</span> - clickY)<span class="comment">; </span></span><br><span class="line">	&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>另外，mouseClick方法中我们需要调用一下即可。mouseClick方法现在改写如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line">void mouse<span class="constructor">Click(<span class="params">int</span> <span class="params">btn</span>, <span class="params">int</span> <span class="params">state</span>, <span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 赋值全局变量 */</span></span><br><span class="line">		clickX = x;</span><br><span class="line">		clickY = y;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="built_in">int</span> optionHeight = <span class="number">40</span>;</span><br><span class="line">	<span class="built_in">int</span> optionWidth = <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> (btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &lt; optionWidth)</span><br><span class="line">		&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">nowColor</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor<span class="literal">[<span class="number">0</span>]</span>, nowColor<span class="literal">[<span class="number">1</span>]</span>, nowColor<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			gl<span class="constructor">ColorCircle(-180, 280, 10, <span class="params">nowColor</span>)</span>;</span><br><span class="line">		<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &gt; optionWidth) &#123;</span><br><span class="line">			<span class="comment">//取当前的点</span></span><br><span class="line">			GLubyte color<span class="literal">[<span class="number">3</span>]</span>;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">color</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, color<span class="literal">[<span class="number">0</span>]</span>, color<span class="literal">[<span class="number">1</span>]</span>, color<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 如果点击了开始绘制的按钮 */</span></span><br><span class="line">			<span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">startBtn</span>)</span>) &#123;</span><br><span class="line">				drawStatus = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 开始画一个图形，顶点个数置零 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum = <span class="number">0</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			<span class="comment">/* 如果点击了结束绘制的按钮 */</span></span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">endBtn</span>)</span>) &#123;</span><br><span class="line">				glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">				<span class="comment">/* 画的图形个数加一 */</span></span><br><span class="line">				con++;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">delBtn</span>)</span>) &#123;</span><br><span class="line">				<span class="comment">/* 删除时设置drawStatus为2 */</span></span><br><span class="line">				drawStatus = <span class="number">2</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">moveBtn</span>)</span>) &#123;</span><br><span class="line">				<span class="comment">/* 移动时设置drawStatus为3 */</span></span><br><span class="line">				drawStatus = <span class="number">3</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">		<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="comment">/* 如果当前是正在取点状态 */</span></span><br><span class="line">			<span class="keyword">if</span> (drawStatus<span class="operator"> == </span><span class="number">0</span>)</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 保存每个点，然后该图形顶点个数加一 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.x<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= x;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.y<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= y;</span><br><span class="line">				<span class="comment">/* 画点 */</span></span><br><span class="line">				gl<span class="constructor">Points(<span class="params">x</span>, <span class="params">y</span>)</span>;</span><br><span class="line">				<span class="comment">/* 设置当前颜色RGB，如果取色有变动，以最后的取色为准 */</span> </span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">0</span>]</span> = nowColor<span class="literal">[<span class="number">0</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">1</span>]</span> = nowColor<span class="literal">[<span class="number">1</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">2</span>]</span> = nowColor<span class="literal">[<span class="number">2</span>]</span>;</span><br><span class="line">				printf(<span class="string">"polyColor%d%d%d\n"</span>, polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">0</span>]</span>,polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">1</span>]</span>,polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum++;</span><br><span class="line">				printf(<span class="string">"con:%d,verNum:%d\n"</span>, con, polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum);</span><br><span class="line">			&#125;<span class="keyword">else</span> <span class="keyword">if</span> (drawStatus<span class="operator"> == </span><span class="number">2</span>) &#123;</span><br><span class="line">				<span class="comment">/* 删除图形 */</span></span><br><span class="line">				delete<span class="constructor">Poly(<span class="params">x</span>, <span class="params">y</span>)</span>;</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span>(drawStatus<span class="operator"> == </span><span class="number">3</span>) &#123;</span><br><span class="line">				moveNum = -<span class="number">1</span>;</span><br><span class="line">				for (<span class="built_in">int</span> i = <span class="number">0</span>; i&lt; con; i++) &#123;</span><br><span class="line">					<span class="keyword">if</span> (point<span class="constructor">InPoly(<span class="params">polygons</span>[<span class="params">i</span>], <span class="params">x</span>, <span class="params">y</span>)</span>) &#123;</span><br><span class="line">						moveNum = i;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>好，现在就大功告成了，看一下运行结果吧</p>
                  <p>[embed]<a href="http://qiniu.cuiqingcai.com/robot3.mp4[/embed" target="_blank" rel="noopener">http://qiniu.cuiqingcai.com/robot3.mp4[/embed</a>]</p>
                  <p>现在完整的代码如下，代码过长，不完全显示，<strong>双击查看完整代码</strong></p>
                  <figure class="highlight arduino">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;glut.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;math.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;iostream&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> <span class="built_in">std</span>;</span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="meta-keyword">define</span> PI 3.1415926</span></span><br><span class="line"><span class="comment">/* 每个图形最多的顶点数 */</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">define</span> MAX_VERTEX 10</span></span><br><span class="line"><span class="comment">/* 画的图形最多的个数 */</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">define</span> MAX_PLOY 10</span></span><br><span class="line"><span class="comment">/* 窗口长宽的一半 */</span></span><br><span class="line"><span class="keyword">int</span> halfWidth, halfHeight;</span><br><span class="line"><span class="comment">/* 绘制多边形的起始标志，0是开始绘制，1是结束绘制，初始为-1 */</span></span><br><span class="line"><span class="keyword">int</span>	drawStatus	= <span class="number">-1</span>;</span><br><span class="line"><span class="keyword">int</span>	moveNum		= <span class="number">-1</span>;</span><br><span class="line"><span class="comment">/* 定义点击点的x,y*/</span></span><br><span class="line"><span class="keyword">int</span> clickX, clickY;</span><br><span class="line"><span class="comment">/* 多边形结构体 */</span></span><br><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">polygon</span> &#123;</span></span><br><span class="line">	<span class="comment">/* 顶点坐标 */</span></span><br><span class="line">	<span class="keyword">int</span>	x[MAX_VERTEX];</span><br><span class="line">	<span class="keyword">int</span>	y[MAX_VERTEX];</span><br><span class="line">	<span class="comment">/* 定义第几个顶点 */</span></span><br><span class="line">	<span class="keyword">int</span>	verNum;</span><br><span class="line">	GLubyte color[<span class="number">3</span>];</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">/* 各种颜色 */</span></span><br><span class="line">GLubyte border[<span class="number">3</span>] = &#123; <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span> &#125;;</span><br><span class="line">GLubyte grey[<span class="number">3</span>] = &#123; <span class="number">195</span>, <span class="number">195</span>, <span class="number">195</span> &#125;;</span><br><span class="line">GLubyte yellow[<span class="number">3</span>] = &#123; <span class="number">255</span>, <span class="number">243</span>, <span class="number">0</span> &#125;;</span><br><span class="line">GLubyte red[<span class="number">3</span>] = &#123; <span class="number">237</span>, <span class="number">28</span>, <span class="number">36</span> &#125;;</span><br><span class="line">GLubyte darkGrey[<span class="number">3</span>] = &#123; <span class="number">126</span>, <span class="number">126</span>, <span class="number">126</span> &#125;;</span><br><span class="line">GLubyte white[<span class="number">3</span>] = &#123; <span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span> &#125;;</span><br><span class="line">GLubyte startBtn[<span class="number">3</span>] = &#123; <span class="number">10</span>, <span class="number">10</span>, <span class="number">10</span> &#125;;</span><br><span class="line">GLubyte endBtn[<span class="number">3</span>] = &#123; <span class="number">20</span>, <span class="number">20</span>, <span class="number">20</span> &#125;;</span><br><span class="line">GLubyte delBtn[<span class="number">3</span>] = &#123; <span class="number">30</span>, <span class="number">30</span>, <span class="number">30</span> &#125;;</span><br><span class="line">GLubyte moveBtn[<span class="number">3</span>] = &#123; <span class="number">40</span>, <span class="number">40</span>, <span class="number">40</span> &#125;;</span><br><span class="line"><span class="comment">/* 当前颜色 */</span></span><br><span class="line">GLubyte nowColor[<span class="number">3</span>] = &#123; <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span> &#125;;</span><br><span class="line"><span class="comment">/* 声明多边形数组 */</span></span><br><span class="line">polygon polygons[MAX_PLOY];</span><br><span class="line"><span class="comment">/* 记录画了几个多边形 */</span></span><br><span class="line"><span class="keyword">int</span> con = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 绘制多边形 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glPolygons</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">if</span> ( con &gt;= <span class="number">0</span> )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="keyword">for</span> ( <span class="keyword">int</span> i = <span class="number">0</span>; i &lt;= con; i++ )</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="comment">/* 取到这个多边形 */</span></span><br><span class="line">			polygon poly = polygons[i];</span><br><span class="line">			<span class="comment">/* 画封闭线 */</span></span><br><span class="line">			glBegin( GL_LINE_LOOP );</span><br><span class="line">			<span class="keyword">int</span> num = poly.verNum;</span><br><span class="line">			<span class="built_in">printf</span>( <span class="string">"num:%d\n"</span>, num );</span><br><span class="line">			<span class="keyword">for</span> ( <span class="keyword">int</span> j = <span class="number">0</span>; j &lt; num; j++ )</span><br><span class="line">			&#123;</span><br><span class="line">				glColor3ub( poly.color[<span class="number">0</span>], poly.color[<span class="number">1</span>], poly.color[<span class="number">2</span>] );</span><br><span class="line">				glVertex2d( poly.x[j] - halfWidth, halfHeight - poly.y[j] );</span><br><span class="line">				<span class="built_in">printf</span>( <span class="string">"polyx:%d,polyy:%d"</span>, poly.x[j], poly.y[j] );</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">/* 结束画线 */</span></span><br><span class="line">			glEnd();</span><br><span class="line">			<span class="comment">/* 刷新 */</span></span><br><span class="line">			glFlush();</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 绘制填充的圆形 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glColorCircle</span><span class="params">( <span class="keyword">int</span> x, <span class="keyword">int</span> y, <span class="keyword">int</span> R, GLubyte color[<span class="number">3</span>] )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 开始绘制曲线 */</span></span><br><span class="line">	glBegin( GL_POLYGON );</span><br><span class="line">	<span class="comment">/* 设置颜色 */</span></span><br><span class="line">	glColor3ub( color[<span class="number">0</span>], color[<span class="number">1</span>], color[<span class="number">2</span>] );</span><br><span class="line">	<span class="comment">/* 每次画增加的弧度 */</span></span><br><span class="line">	<span class="keyword">double</span> delta_angle = PI / <span class="number">180</span>;</span><br><span class="line">	<span class="comment">/* 画圆弧 */</span></span><br><span class="line">	<span class="keyword">for</span> ( <span class="keyword">double</span> i = <span class="number">0</span>; i &lt;= <span class="number">2</span> * PI; i += delta_angle )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 绝对定位加三角函数值 */</span></span><br><span class="line">		<span class="keyword">double</span>	vx	= x + R * <span class="built_in">cos</span>( i );</span><br><span class="line">		<span class="keyword">double</span>	vy	= y + R*<span class="built_in">sin</span>( i );</span><br><span class="line">		glVertex2d( vx, vy );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 结束绘画 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画矩形，传入的是左下角XY坐标和右上角XY坐标 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glRect</span><span class="params">( <span class="keyword">int</span> leftX, <span class="keyword">int</span> leftY, <span class="keyword">int</span> rightX, <span class="keyword">int</span> rightY )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 画封闭曲线 */</span></span><br><span class="line">	glBegin( GL_LINE_LOOP );</span><br><span class="line">	<span class="comment">/* 左下角 */</span></span><br><span class="line">	glVertex2d( leftX, leftY );</span><br><span class="line">	<span class="comment">/* 右下角 */</span></span><br><span class="line">	glVertex2d( rightX, leftY );</span><br><span class="line">	<span class="comment">/* 右上角 */</span></span><br><span class="line">	glVertex2d( rightX, rightY );</span><br><span class="line">	<span class="comment">/* 左上角 */</span></span><br><span class="line">	glVertex2d( leftX, rightY );</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画圆角矩形，传入矩形宽高，角半径，矩形中心点坐标 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glRoundRec</span><span class="params">( <span class="keyword">int</span> centerX, <span class="keyword">int</span> centerY, <span class="keyword">int</span> <span class="built_in">width</span>, <span class="keyword">int</span> <span class="built_in">height</span>, <span class="keyword">float</span> cirR )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 二分之PI，一个象限的角度 */</span></span><br><span class="line">	<span class="keyword">float</span> PI_HALF = PI / <span class="number">2</span>;</span><br><span class="line">	<span class="comment">/* 划分程度,值越大画得越精细 */</span></span><br><span class="line">	<span class="keyword">float</span> divide = <span class="number">20.0</span>;</span><br><span class="line">	<span class="comment">/* 圆角矩形的坐标 */</span></span><br><span class="line">	<span class="keyword">float</span> tx, ty;</span><br><span class="line">	<span class="comment">/* 画封闭曲线 */</span></span><br><span class="line">	glBegin( GL_LINE_LOOP );</span><br><span class="line">	<span class="comment">/* 四个象限不同的操作符 */</span></span><br><span class="line">	<span class="keyword">int</span>	opX[<span class="number">4</span>]	= &#123; <span class="number">1</span>, <span class="number">-1</span>, <span class="number">-1</span>, <span class="number">1</span> &#125;;</span><br><span class="line">	<span class="keyword">int</span>	opY[<span class="number">4</span>]	= &#123; <span class="number">1</span>, <span class="number">1</span>, <span class="number">-1</span>, <span class="number">-1</span> &#125;;</span><br><span class="line">	<span class="comment">/* 用来计数，从第一象限到第四象限 */</span></span><br><span class="line">	<span class="keyword">float</span> x = <span class="number">0</span>;</span><br><span class="line">	<span class="comment">/* x自增时加的值 */</span></span><br><span class="line">	<span class="keyword">float</span> part = <span class="number">1</span> / divide;</span><br><span class="line">	<span class="comment">/* 计算内矩形宽高一半的数值 */</span></span><br><span class="line">	<span class="keyword">int</span>	w	= <span class="built_in">width</span> / <span class="number">2</span> - cirR;</span><br><span class="line">	<span class="keyword">int</span>	h	= <span class="built_in">height</span> / <span class="number">2</span> - cirR;</span><br><span class="line">	<span class="comment">/* 循环画线 */</span></span><br><span class="line">	<span class="keyword">for</span> ( x = <span class="number">0</span>; x &lt; <span class="number">4</span>; x += part )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 求出弧度 */</span></span><br><span class="line">		<span class="keyword">float</span> rad = PI_HALF * x;</span><br><span class="line">		<span class="comment">/* 计算坐标值 */</span></span><br><span class="line">		tx	= cirR * <span class="built_in">cos</span>( rad ) + opX[(<span class="keyword">int</span>) x] * w + centerX;</span><br><span class="line">		ty	= cirR * <span class="built_in">sin</span>( rad ) + opY[(<span class="keyword">int</span>) x] * h + centerY;</span><br><span class="line">		<span class="comment">/*传入坐标画线 */</span></span><br><span class="line">		glVertex2f( tx, ty );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画弧线，相对偏移量XY，开始的弧度，结束的弧度，半径 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glArc</span><span class="params">( <span class="keyword">double</span> x, <span class="keyword">double</span> y, <span class="keyword">double</span> start_angle, <span class="keyword">double</span> end_angle, <span class="keyword">double</span> radius )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 开始绘制曲线 */</span></span><br><span class="line">	glBegin( GL_LINE_STRIP );</span><br><span class="line">	<span class="comment">/* 每次画增加的弧度 */</span></span><br><span class="line">	<span class="keyword">double</span> delta_angle = PI / <span class="number">180</span>;</span><br><span class="line">	<span class="comment">/* 画圆弧 */</span></span><br><span class="line">	<span class="keyword">for</span> ( <span class="keyword">double</span> i = start_angle; i &lt;= end_angle; i += delta_angle )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 绝对定位加三角函数值 */</span></span><br><span class="line">		<span class="keyword">double</span>	vx	= x + radius * <span class="built_in">cos</span>( i );</span><br><span class="line">		<span class="keyword">double</span>	vy	= y + radius*<span class="built_in">sin</span>( i );</span><br><span class="line">		glVertex2d( vx, vy );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 结束绘画 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画圆 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glCircle</span><span class="params">( <span class="keyword">double</span> x, <span class="keyword">double</span> y, <span class="keyword">double</span> radius )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 画全圆 */</span></span><br><span class="line">	glArc( x, y, <span class="number">0</span>, <span class="number">2</span> * PI, radius );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画三角形，传入三个点的坐标 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glTri</span><span class="params">( <span class="keyword">int</span> x1, <span class="keyword">int</span> y1, <span class="keyword">int</span> x2, <span class="keyword">int</span> y2, <span class="keyword">int</span> x3, <span class="keyword">int</span> y3 )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 画封闭线 */</span></span><br><span class="line">	glBegin( GL_LINE_LOOP );</span><br><span class="line">	<span class="comment">/* 一点 */</span></span><br><span class="line">	glVertex2d( x1, y1 );</span><br><span class="line">	<span class="comment">/* 二点 */</span></span><br><span class="line">	glVertex2d( x2, y2 );</span><br><span class="line">	<span class="comment">/*三点 */</span></span><br><span class="line">	glVertex2d( x3, y3 );</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画线，传入两点坐标 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glLine</span><span class="params">( <span class="keyword">int</span> x1, <span class="keyword">int</span> y1, <span class="keyword">int</span> x2, <span class="keyword">int</span> y2 )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 画封闭线 */</span></span><br><span class="line">	glBegin( GL_LINE_STRIP );</span><br><span class="line">	<span class="comment">/* 一点 */</span></span><br><span class="line">	glVertex2d( x1, y1 );</span><br><span class="line">	<span class="comment">/* 二点 */</span></span><br><span class="line">	glVertex2d( x2, y2 );</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 函数用来画图 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">display</span><span class="params">( <span class="keyword">void</span> )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* GL_COLOR_BUFFER_BIT表示清除颜色 */</span></span><br><span class="line">	glClear( GL_COLOR_BUFFER_BIT );</span><br><span class="line">	<span class="comment">/* 设置画线颜色 */</span></span><br><span class="line">	glColor3f( <span class="number">0.5</span>, <span class="number">0.5</span>, <span class="number">0.5</span> );</span><br><span class="line">	<span class="comment">/* 画点大小 */</span></span><br><span class="line">	glPointSize( <span class="number">2</span> );</span><br><span class="line">	<span class="comment">/* 画圆角矩形，大肚子 */</span></span><br><span class="line">	glRoundRec( <span class="number">0</span>, <span class="number">0</span>, <span class="number">146</span>, <span class="number">120</span>, <span class="number">15</span> );</span><br><span class="line">	<span class="comment">/* 画圆，中间小圈 */</span></span><br><span class="line">	glCircle( <span class="number">0</span>, <span class="number">0</span>, <span class="number">10</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，脖子 */</span></span><br><span class="line">	glRect( <span class="number">-25</span>, <span class="number">60</span>, <span class="number">25</span>, <span class="number">76</span> );</span><br><span class="line">	<span class="comment">/* 画圆角矩形，大脸 */</span></span><br><span class="line">	glRoundRec( <span class="number">0</span>, <span class="number">113</span>, <span class="number">128</span>, <span class="number">74</span>, <span class="number">10</span> );</span><br><span class="line">	<span class="comment">/* 两个眼睛 */</span></span><br><span class="line">	glCircle( <span class="number">-30</span>, <span class="number">111</span>, <span class="number">10</span> );</span><br><span class="line">	glCircle( <span class="number">30</span>, <span class="number">111</span>, <span class="number">10</span> );</span><br><span class="line">	<span class="comment">/* 两条天线 */</span></span><br><span class="line">	glLine( <span class="number">-35</span>, <span class="number">150</span>, <span class="number">-35</span>, <span class="number">173</span> );</span><br><span class="line">	glLine( <span class="number">35</span>, <span class="number">150</span>, <span class="number">35</span>, <span class="number">173</span> );</span><br><span class="line">	<span class="comment">/* 圆角矩形，两个耳朵 */</span></span><br><span class="line">	glRoundRec( <span class="number">81</span>, <span class="number">115</span>, <span class="number">20</span>, <span class="number">34</span>, <span class="number">5</span> );</span><br><span class="line">	glRoundRec( <span class="number">-81</span>, <span class="number">115</span>, <span class="number">20</span>, <span class="number">34</span>, <span class="number">5</span> );</span><br><span class="line">	<span class="comment">/* 圆弧，画嘴 */</span></span><br><span class="line">	glArc( <span class="number">0</span>, <span class="number">133</span>, <span class="number">11</span> * PI / <span class="number">8</span>, <span class="number">13</span> * PI / <span class="number">8</span>, <span class="number">45</span> );</span><br><span class="line">	<span class="comment">/* 画三角，肚子里的三角 */</span></span><br><span class="line">	glTri( <span class="number">-30</span>, <span class="number">-15</span>, <span class="number">30</span>, <span class="number">-15</span>, <span class="number">0</span>, <span class="number">28</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，胳膊连接处 */</span></span><br><span class="line">	glRect( <span class="number">-81</span>, <span class="number">43</span>, <span class="number">-73</span>, <span class="number">25</span> );</span><br><span class="line">	glRect( <span class="number">81</span>, <span class="number">43</span>, <span class="number">73</span>, <span class="number">25</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，上臂 */</span></span><br><span class="line">	glRect( <span class="number">-108</span>, <span class="number">45</span>, <span class="number">-81</span>, <span class="number">0</span> );</span><br><span class="line">	glRect( <span class="number">108</span>, <span class="number">45</span>, <span class="number">81</span>, <span class="number">0</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，中臂 */</span></span><br><span class="line">	glRect( <span class="number">-101</span>, <span class="number">0</span>, <span class="number">-88</span>, <span class="number">-4</span> );</span><br><span class="line">	glRect( <span class="number">101</span>, <span class="number">0</span>, <span class="number">88</span>, <span class="number">-4</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，下臂 */</span></span><br><span class="line">	glRect( <span class="number">-108</span>, <span class="number">-4</span>, <span class="number">-81</span>, <span class="number">-37</span> );</span><br><span class="line">	glRect( <span class="number">108</span>, <span class="number">-4</span>, <span class="number">81</span>, <span class="number">-37</span> );</span><br><span class="line">	<span class="comment">/* 画圆形，手掌 */</span></span><br><span class="line">	glCircle( <span class="number">-95</span>, <span class="number">-47</span>, <span class="number">10</span> );</span><br><span class="line">	glCircle( <span class="number">95</span>, <span class="number">-47</span>, <span class="number">10</span> );</span><br><span class="line"></span><br><span class="line">	<span class="comment">/* 绘制取色盘 */</span></span><br><span class="line">	glColorCircle( <span class="number">-280</span>, <span class="number">280</span>, <span class="number">10</span>, red );</span><br><span class="line">	glColorCircle( <span class="number">-250</span>, <span class="number">280</span>, <span class="number">10</span>, yellow );</span><br><span class="line">	glColorCircle( <span class="number">-220</span>, <span class="number">280</span>, <span class="number">10</span>, grey );</span><br><span class="line">	glColorCircle( <span class="number">-180</span>, <span class="number">280</span>, <span class="number">10</span>, nowColor );</span><br><span class="line">	glColorCircle( <span class="number">250</span>, <span class="number">280</span>, <span class="number">10</span>, startBtn );</span><br><span class="line">	glColorCircle( <span class="number">280</span>, <span class="number">280</span>, <span class="number">10</span>, endBtn );</span><br><span class="line">	glColorCircle( <span class="number">220</span>, <span class="number">280</span>, <span class="number">10</span>, delBtn );</span><br><span class="line">	glColorCircle( <span class="number">190</span>, <span class="number">280</span>, <span class="number">10</span>, moveBtn );</span><br><span class="line">	<span class="comment">/* 保证前面的OpenGL命令立即执行，而不是让它们在缓冲区中等待 */</span></span><br><span class="line">	<span class="comment">/* 绘制多边形 */</span></span><br><span class="line">	glPolygons();</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 窗口大小变化时调用的函数 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">ChangeSize</span><span class="params">( GLsizei w, GLsizei h )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 避免高度为0 */</span></span><br><span class="line">	<span class="keyword">if</span> ( h == <span class="number">0</span> )</span><br><span class="line">	&#123;</span><br><span class="line">		h = <span class="number">1</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 定义视口大小，宽高一致 */</span></span><br><span class="line">	glViewport( <span class="number">0</span>, <span class="number">0</span>, w, h );</span><br><span class="line">	<span class="keyword">int</span> half = <span class="number">300</span>;</span><br><span class="line">	<span class="comment">/* 定义宽高的一半 */</span></span><br><span class="line">	halfHeight	= <span class="number">300</span>;</span><br><span class="line">	halfWidth	= <span class="number">300</span>;</span><br><span class="line">	<span class="comment">/* 重置坐标系统，使投影变换复位 */</span></span><br><span class="line">	glMatrixMode( GL_PROJECTION );</span><br><span class="line">	<span class="comment">/* 将当前的用户坐标系的原点移到了屏幕中心 */</span></span><br><span class="line">	glLoadIdentity();</span><br><span class="line">	<span class="comment">/* 定义正交视域体 */</span></span><br><span class="line">	<span class="keyword">if</span> ( w &lt; h )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果高度大于宽度，则将高度视角扩大，图形显示居中 */</span></span><br><span class="line">		glOrtho( -half, half, -half * h / w, half * h / w, -half, half );</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="comment">/* 如果宽度大于高度，则将宽度视角扩大，图形显示居中 */</span></span><br><span class="line">		glOrtho( -half * w / h, half * w / h, -half, half, -half, half );</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 判断两个颜色是否相等 */</span></span><br><span class="line"><span class="function"><span class="keyword">bool</span> <span class="title">sameColor</span><span class="params">( GLubyte color1[<span class="number">3</span>], GLubyte color2[<span class="number">3</span>] )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">if</span> ( color1[<span class="number">0</span>] - color2[<span class="number">0</span>] &lt; <span class="number">5</span> &amp;&amp; color1[<span class="number">1</span>] - color2[<span class="number">1</span>] &lt; <span class="number">5</span> &amp;&amp; color1[<span class="number">2</span>] - color2[<span class="number">1</span>] &lt; <span class="number">5</span> )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="keyword">return</span>(<span class="literal">true</span>);</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="keyword">return</span>(<span class="literal">false</span>);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画点 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glPoints</span><span class="params">( <span class="keyword">int</span> x, <span class="keyword">int</span> y )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	glBegin( GL_POINTS );</span><br><span class="line">	<span class="comment">/* 点直接设置为黑色 */</span></span><br><span class="line">	glColor3ub( <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span> );</span><br><span class="line">	glVertex2d( x - halfWidth, halfHeight - y );</span><br><span class="line">	glEnd();</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 判断一个点是否在多边形内部 */</span></span><br><span class="line"><span class="function"><span class="keyword">bool</span> <span class="title">pointInPoly</span><span class="params">( polygon poly, <span class="keyword">int</span> x, <span class="keyword">int</span> y )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">int</span> nCross = <span class="number">0</span>;</span><br><span class="line">	<span class="keyword">for</span> ( <span class="keyword">int</span> i = <span class="number">0</span>; i &lt; poly.verNum; i++ )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="keyword">int</span>	p1x	= poly.x[i];</span><br><span class="line">		<span class="keyword">int</span>	p1y	= poly.y[i];</span><br><span class="line">		<span class="keyword">int</span>	p2x	= poly.x[(i + <span class="number">1</span>) % poly.verNum];</span><br><span class="line">		<span class="keyword">int</span>	p2y	= poly.y[(i + <span class="number">1</span>) % poly.verNum];</span><br><span class="line">		<span class="comment">/* 平行或在延长线上，忽略 */</span></span><br><span class="line">		<span class="keyword">if</span> ( p1y == p2y || y &lt; <span class="built_in">min</span>( p1y, p2y ) || y &gt; <span class="built_in">max</span>( p1y, p2y ) )</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="keyword">continue</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">/* 计算交点横坐标 */</span></span><br><span class="line">		<span class="keyword">double</span> m = (<span class="keyword">double</span>) (y - p1y) * (<span class="keyword">double</span>) (p2x - p1x) / (<span class="keyword">double</span>) (p2y - p1y) + p1x;</span><br><span class="line">		<span class="keyword">if</span> ( m &gt; x )</span><br><span class="line">			nCross++;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">return</span>(nCross % <span class="number">2</span> == <span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 移动多边形 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">movePoly</span><span class="params">( <span class="keyword">int</span> x, <span class="keyword">int</span> y )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 取到要移动的图形 */</span></span><br><span class="line">	<span class="keyword">int</span> verNum = polygons[moveNum].verNum;</span><br><span class="line">	<span class="built_in">printf</span>( <span class="string">"verNum%d,x%d,y%d,clickX%d,clickY%d\n"</span>, verNum, x, y, clickX, clickY );</span><br><span class="line">	<span class="keyword">for</span> ( <span class="keyword">int</span> i = <span class="number">0</span>; i &lt; verNum; i++ )</span><br><span class="line">	&#123;</span><br><span class="line">		polygons[moveNum].x[i]	+= (x - clickX);</span><br><span class="line">		polygons[moveNum].y[i]	+= (y - clickY);</span><br><span class="line">		<span class="built_in">printf</span>( <span class="string">"polyx%d\n"</span>, polygons[moveNum].x[i] );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 移动完毕之后重新记录当前的点 */</span></span><br><span class="line">	clickX	= x;</span><br><span class="line">	clickY	= y;</span><br><span class="line">	<span class="comment">/* 重新绘制 */</span></span><br><span class="line">	glutPostRedisplay();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 删除多边形 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">removePoly</span><span class="params">( <span class="keyword">int</span> index )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">if</span> ( index &gt; con )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="built_in">printf</span>( <span class="string">"Out Of Index\n"</span> );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">for</span> ( <span class="keyword">int</span> i = index; i &lt; con; i++ )</span><br><span class="line">	&#123;</span><br><span class="line">		polygons[i] = polygons[i + <span class="number">1</span>];</span><br><span class="line">	&#125;</span><br><span class="line">	con--;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 删除多边形 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">deletePoly</span><span class="params">( <span class="keyword">int</span> x, <span class="keyword">int</span> y )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">int</span> delenum = <span class="number">-1</span>;</span><br><span class="line">	<span class="keyword">for</span> ( <span class="keyword">int</span> i = <span class="number">0</span>; i &lt; con; i++ )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="keyword">if</span> ( pointInPoly( polygons[i], x, y ) )</span><br><span class="line">		&#123;</span><br><span class="line">			delenum = i;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> ( delenum != <span class="number">-1</span> )</span><br><span class="line">	&#123;</span><br><span class="line">		removePoly( delenum );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 重新绘制 */</span></span><br><span class="line">	glutPostRedisplay();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">mouseClick</span><span class="params">( <span class="keyword">int</span> btn, <span class="keyword">int</span> state, <span class="keyword">int</span> x, <span class="keyword">int</span> y )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 赋值全局变量 */</span></span><br><span class="line">	clickX	= x;</span><br><span class="line">	clickY	= y;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="keyword">int</span>	optionHeight	= <span class="number">40</span>;</span><br><span class="line">	<span class="keyword">int</span>	optionWidth	= <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> ( btn == GLUT_LEFT_BUTTON &amp;&amp; state == GLUT_DOWN )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> ( y &lt; optionHeight &amp;&amp; x &lt; optionWidth )</span><br><span class="line">		&#123;</span><br><span class="line">			glReadPixels( x, <span class="number">2</span> * halfHeight - y, <span class="number">1</span>, <span class="number">1</span>, GL_RGB, GL_UNSIGNED_BYTE, &amp;nowColor );</span><br><span class="line">			<span class="built_in">printf</span>( <span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor[<span class="number">0</span>], nowColor[<span class="number">1</span>], nowColor[<span class="number">2</span>] );</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			glColorCircle( <span class="number">-180</span>, <span class="number">280</span>, <span class="number">10</span>, nowColor );</span><br><span class="line">			<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> ( y &lt; optionHeight &amp;&amp; x &gt; optionWidth )</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="comment">/* 取当前的点 */</span></span><br><span class="line">			GLubyte color[<span class="number">3</span>];</span><br><span class="line">			glReadPixels( x, <span class="number">2</span> * halfHeight - y, <span class="number">1</span>, <span class="number">1</span>, GL_RGB, GL_UNSIGNED_BYTE, &amp;color );</span><br><span class="line">			<span class="built_in">printf</span>( <span class="string">"r:%d,g:%d,b:%d\n"</span>, color[<span class="number">0</span>], color[<span class="number">1</span>], color[<span class="number">2</span>] );</span><br><span class="line">			<span class="comment">/* 如果点击了开始绘制的按钮 */</span></span><br><span class="line">			<span class="keyword">if</span> ( sameColor( color, startBtn ) )</span><br><span class="line">			&#123;</span><br><span class="line">				drawStatus = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 开始画一个图形，顶点个数置零 */</span></span><br><span class="line">				polygons[con].verNum = <span class="number">0</span>;</span><br><span class="line">				<span class="built_in">printf</span>( <span class="string">"drawStatus:%d\n"</span>, drawStatus );</span><br><span class="line">				<span class="comment">/* 如果点击了结束绘制的按钮 */</span></span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( sameColor( color, endBtn ) )</span><br><span class="line">			&#123;</span><br><span class="line">				glutPostRedisplay();</span><br><span class="line">				<span class="comment">/* 画的图形个数加一 */</span></span><br><span class="line">				con++;</span><br><span class="line">				<span class="built_in">printf</span>( <span class="string">"drawStatus:%d\n"</span>, drawStatus );</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( sameColor( color, delBtn ) )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 删除时设置drawStatus为2 */</span></span><br><span class="line">				drawStatus = <span class="number">2</span>;</span><br><span class="line">				<span class="built_in">printf</span>( <span class="string">"drawStatus:%d\n"</span>, drawStatus );</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( sameColor( color, moveBtn ) )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 移动时设置drawStatus为3 */</span></span><br><span class="line">				drawStatus = <span class="number">3</span>;</span><br><span class="line">				<span class="built_in">printf</span>( <span class="string">"drawStatus:%d\n"</span>, drawStatus );</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="comment">/* 如果当前是正在取点状态 */</span></span><br><span class="line">			<span class="keyword">if</span> ( drawStatus == <span class="number">0</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 保存每个点，然后该图形顶点个数加一 */</span></span><br><span class="line">				polygons[con].x[polygons[con].verNum]	= x;</span><br><span class="line">				polygons[con].y[polygons[con].verNum]	= y;</span><br><span class="line">				<span class="comment">/* 画点 */</span></span><br><span class="line">				glPoints( x, y );</span><br><span class="line">				<span class="comment">/* 设置当前颜色RGB，如果取色有变动，以最后的取色为准 */</span></span><br><span class="line">				polygons[con].color[<span class="number">0</span>]	= nowColor[<span class="number">0</span>];</span><br><span class="line">				polygons[con].color[<span class="number">1</span>]	= nowColor[<span class="number">1</span>];</span><br><span class="line">				polygons[con].color[<span class="number">2</span>]	= nowColor[<span class="number">2</span>];</span><br><span class="line">				<span class="built_in">printf</span>( <span class="string">"polyColor%d%d%d\n"</span>, polygons[con].color[<span class="number">0</span>], polygons[con].color[<span class="number">1</span>], polygons[con].color[<span class="number">2</span>] );</span><br><span class="line">				polygons[con].verNum++;</span><br><span class="line">				<span class="built_in">printf</span>( <span class="string">"con:%d,verNum:%d\n"</span>, con, polygons[con].verNum );</span><br><span class="line">			&#125;<span class="keyword">else</span> <span class="keyword">if</span> ( drawStatus == <span class="number">2</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 删除图形 */</span></span><br><span class="line">				deletePoly( x, y );</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( drawStatus == <span class="number">3</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				moveNum = <span class="number">-1</span>;</span><br><span class="line">				<span class="keyword">for</span> ( <span class="keyword">int</span> i = <span class="number">0</span>; i &lt; con; i++ )</span><br><span class="line">				&#123;</span><br><span class="line">					<span class="keyword">if</span> ( pointInPoly( polygons[i], x, y ) )</span><br><span class="line">					&#123;</span><br><span class="line">						moveNum = i;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 鼠标移动事件 */</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">mouseMove</span><span class="params">( <span class="keyword">int</span> x, <span class="keyword">int</span> y )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">if</span> ( drawStatus == <span class="number">3</span> &amp;&amp; moveNum != <span class="number">-1</span> )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="built_in">printf</span>( <span class="string">"move x:%d,y:%dmoveNum:%d\n"</span>, x, y, moveNum );</span><br><span class="line">		movePoly( x, y );</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*程序入口 */</span></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">( <span class="keyword">int</span> argc, <span class="keyword">char</span> *argv[] )</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">/* 对GLUT进行初始化，并处理所有的命令行参数 */</span></span><br><span class="line">	glutInit( &amp;argc, argv );</span><br><span class="line">	<span class="comment">/* 指定RGB颜色模式和单缓冲窗口 */</span></span><br><span class="line">	glutInitDisplayMode( GLUT_RGB | GLUT_SINGLE );</span><br><span class="line">	<span class="comment">/* 定义窗口的位置 */</span></span><br><span class="line">	glutInitWindowPosition( <span class="number">100</span>, <span class="number">100</span> );</span><br><span class="line">	<span class="comment">/* 定义窗口的大小 */</span></span><br><span class="line">	glutInitWindowSize( <span class="number">600</span>, <span class="number">600</span> );</span><br><span class="line">	<span class="comment">/* 创建窗口，同时为之命名 */</span></span><br><span class="line">	glutCreateWindow( <span class="string">"OpenGL"</span> );</span><br><span class="line">	<span class="comment">/* 设置窗口清除颜色为白色 */</span></span><br><span class="line">	glClearColor( <span class="number">1.0f</span>, <span class="number">1.0f</span>, <span class="number">1.0f</span>, <span class="number">1.0f</span> );</span><br><span class="line">	<span class="comment">/* 参数为一个函数，绘图时这个函数就会被调用 */</span></span><br><span class="line">	glutDisplayFunc( &amp;<span class="built_in">display</span> );</span><br><span class="line">	<span class="comment">/* 参数为一个函数，当窗口大小改变时会被调用 */</span></span><br><span class="line">	glutReshapeFunc( ChangeSize );</span><br><span class="line">	<span class="comment">/*鼠标点击事件，鼠标点击或者松开时调用 */</span></span><br><span class="line">	glutMouseFunc( mouseClick );</span><br><span class="line">	<span class="comment">/*鼠标移动事件，鼠标按下并移动时调用 */</span></span><br><span class="line">	glutMotionFunc( mouseMove );</span><br><span class="line">	<span class="comment">/* 该函数让GLUT框架开始运行，所有设置的回调函数开始工作，直到用户终止程序为止 */</span></span><br><span class="line">	glutMainLoop();</span><br><span class="line">	<span class="comment">/*程序返回 */</span></span><br><span class="line">	<span class="keyword">return</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上，就可以实现图形的移动和删除了。</p>
                  <h2 id="存盘和读盘"><a href="#存盘和读盘" class="headerlink" title="存盘和读盘"></a>存盘和读盘</h2>
                  <p>这个很简单，存盘我们只需要把所有图形的位置以及颜色输出到一个文本中，然后在读盘时，把文本中所有内容读入并存储到多边形结构体数组中，然后重新绘制即可。 代码的讲解直接写在注释中，比较好理解</p>
                  <figure class="highlight mipsasm">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 保存所有的图形 */</span></span><br><span class="line">void savePolygons()</span><br><span class="line">&#123;</span><br><span class="line">	FILE *<span class="built_in">fp</span>;</span><br><span class="line">	int i;</span><br><span class="line">	if ((<span class="built_in">fp</span> = fopen(<span class="string">"shapes.txt"</span>, <span class="string">"w"</span>)) == NULL)</span><br><span class="line">	&#123;</span><br><span class="line">		printf(<span class="string">"不能打开文件!"</span>);</span><br><span class="line">		return;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 保存一共多少个图形 */</span></span><br><span class="line">	fprintf(<span class="built_in">fp</span>, <span class="string">"%d"</span>, con);</span><br><span class="line">	fprintf(<span class="built_in">fp</span>, <span class="string">"\n"</span>);</span><br><span class="line">	for (i = <span class="number">0</span><span class="comment">; i &lt; con; i++)&#123;</span></span><br><span class="line">		<span class="comment">/* 保存颜色值 */</span></span><br><span class="line">		fprintf(<span class="built_in">fp</span>, <span class="string">"%d %d %d "</span>, polygons[i].color[<span class="number">0</span>], polygons[i].color[<span class="number">1</span>], polygons[i].color[<span class="number">2</span>]);</span><br><span class="line">		<span class="comment">/* 保存顶点数量 */</span></span><br><span class="line">		fprintf(<span class="built_in">fp</span>, <span class="string">"%d "</span>, polygons[i].verNum);</span><br><span class="line">		<span class="comment">/* 保存顶点坐标 */</span></span><br><span class="line">		for (int <span class="keyword">j </span>= <span class="number">0</span><span class="comment">; j &lt; polygons[i].verNum; j++)</span></span><br><span class="line">			fprintf(<span class="built_in">fp</span>, <span class="string">"%d "</span>, polygons[i].x[<span class="keyword">j]);</span></span><br><span class="line"><span class="keyword">	</span>	for (int <span class="keyword">j </span>= <span class="number">0</span><span class="comment">; j &lt; polygons[i].verNum; j++)</span></span><br><span class="line">			fprintf(<span class="built_in">fp</span>, <span class="string">"%d "</span>, polygons[i].y[<span class="keyword">j]);</span></span><br><span class="line"><span class="keyword">	</span>	fprintf(<span class="built_in">fp</span>, <span class="string">"\n"</span>);</span><br><span class="line">	&#125;</span><br><span class="line">	fclose(<span class="built_in">fp</span>);</span><br><span class="line">	printf(<span class="string">"保存成功。\n"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 读取存档 */</span></span><br><span class="line">void readPolygons()</span><br><span class="line">&#123;</span><br><span class="line">	FILE *<span class="built_in">fp</span>;</span><br><span class="line">	int i;</span><br><span class="line">	if ((<span class="built_in">fp</span> = fopen(<span class="string">"shapes.txt"</span>, <span class="string">"r"</span>)) == NULL)</span><br><span class="line">	&#123;</span><br><span class="line">		printf(<span class="string">"不能打开文件!"</span>);</span><br><span class="line">		return;</span><br><span class="line">	&#125;</span><br><span class="line">	fscanf(<span class="built_in">fp</span>, <span class="string">"%d"</span>, &amp;con);</span><br><span class="line">	printf(<span class="string">"count%d"</span>,con);</span><br><span class="line">	fscanf(<span class="built_in">fp</span>, <span class="string">"\n"</span>);</span><br><span class="line">	for (i = <span class="number">0</span><span class="comment">; i &lt; con; i++)&#123;</span></span><br><span class="line">		<span class="comment">/* 读取颜色值 */</span></span><br><span class="line">		fscanf(<span class="built_in">fp</span>, <span class="string">"%d %d %d "</span>, &amp;polygons[i].color[<span class="number">0</span>], &amp;polygons[i].color[<span class="number">1</span>], &amp;polygons[i].color[<span class="number">2</span>]);</span><br><span class="line">		<span class="comment">/* 读取顶点数量 */</span></span><br><span class="line">		fscanf(<span class="built_in">fp</span>, <span class="string">"%d "</span>, &amp;polygons[i].verNum);</span><br><span class="line">		<span class="comment">/* 读取顶点坐标 */</span></span><br><span class="line">		for (int <span class="keyword">j </span>= <span class="number">0</span><span class="comment">; j &lt; polygons[i].verNum; j++)</span></span><br><span class="line">			fscanf(<span class="built_in">fp</span>, <span class="string">"%d "</span>, &amp;polygons[i].x[<span class="keyword">j]);</span></span><br><span class="line"><span class="keyword">	</span>	for (int <span class="keyword">j </span>= <span class="number">0</span><span class="comment">; j &lt; polygons[i].verNum; j++)</span></span><br><span class="line">			fscanf(<span class="built_in">fp</span>, <span class="string">"%d "</span>, &amp;polygons[i].y[<span class="keyword">j]);</span></span><br><span class="line"><span class="keyword">	</span>	fscanf(<span class="built_in">fp</span>, <span class="string">"\n"</span>);</span><br><span class="line">	&#125;</span><br><span class="line">	fclose(<span class="built_in">fp</span>);</span><br><span class="line">	printf(<span class="string">"读取成功。\n"</span>);</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们只需要再定义两个按钮，再display中画上这俩按钮</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">GLubyte storeBtn[<span class="number">3</span>] = &#123;<span class="number">50</span>, <span class="number">50</span>, <span class="number">50</span>&#125;;</span><br><span class="line">GLubyte loadBtn[<span class="number">3</span>] = &#123;<span class="number">55</span>, <span class="number">55</span>, <span class="number">55</span>&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>然后把mouseClick方法改写一下就好了。最终mouseClick方法如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 鼠标点击事件 */</span></span><br><span class="line">void mouse<span class="constructor">Click( <span class="params">int</span> <span class="params">btn</span>, <span class="params">int</span> <span class="params">state</span>, <span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span> )</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 赋值全局变量 */</span></span><br><span class="line">	clickX	= x;</span><br><span class="line">	clickY	= y;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="built_in">int</span>	optionHeight	= <span class="number">40</span>;</span><br><span class="line">	<span class="built_in">int</span>	optionWidth	= <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> ( btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> ( y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &lt; optionWidth )</span><br><span class="line">		&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels( <span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">nowColor</span> )</span>;</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			gl<span class="constructor">ColorCircle( -180, 280, 10, <span class="params">nowColor</span> )</span>;</span><br><span class="line">			<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> ( y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &gt; optionWidth )</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="comment">/* 取当前的点 */</span></span><br><span class="line">			GLubyte color<span class="literal">[<span class="number">3</span>]</span>;</span><br><span class="line">			gl<span class="constructor">ReadPixels( <span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">color</span> )</span>;</span><br><span class="line">			<span class="comment">/* 如果点击了开始绘制的按钮 */</span></span><br><span class="line">			<span class="keyword">if</span> ( same<span class="constructor">Color( <span class="params">color</span>, <span class="params">startBtn</span> )</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				drawStatus = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 开始画一个图形，顶点个数置零 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 如果点击了结束绘制的按钮 */</span></span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( same<span class="constructor">Color( <span class="params">color</span>, <span class="params">endBtn</span> )</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">				<span class="comment">/* 画的图形个数加一 */</span></span><br><span class="line">				con++;</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( same<span class="constructor">Color( <span class="params">color</span>, <span class="params">delBtn</span> )</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 删除时设置drawStatus为2 */</span></span><br><span class="line">				drawStatus = <span class="number">2</span>;</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( same<span class="constructor">Color( <span class="params">color</span>, <span class="params">moveBtn</span> )</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 移动时设置drawStatus为3 */</span></span><br><span class="line">				drawStatus = <span class="number">3</span>;</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( same<span class="constructor">Color( <span class="params">color</span>, <span class="params">storeBtn</span> )</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 存盘时设置drawStatus为4 */</span></span><br><span class="line">				drawStatus = <span class="number">4</span>;</span><br><span class="line">				glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">				save<span class="constructor">Polygons()</span>;</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( same<span class="constructor">Color( <span class="params">color</span>, <span class="params">loadBtn</span> )</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 读盘时设置drawStatus为5 */</span></span><br><span class="line">				drawStatus = <span class="number">5</span>;</span><br><span class="line">				read<span class="constructor">Polygons()</span>;</span><br><span class="line">				glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="comment">/* 如果当前是正在取点状态 */</span></span><br><span class="line">			<span class="keyword">if</span> ( drawStatus<span class="operator"> == </span><span class="number">0</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 保存每个点，然后该图形顶点个数加一 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.x<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= x;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.y<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= y;</span><br><span class="line">				<span class="comment">/* 画点 */</span></span><br><span class="line">				gl<span class="constructor">Points( <span class="params">x</span>, <span class="params">y</span> )</span>;</span><br><span class="line">				<span class="comment">/* 设置当前颜色RGB，如果取色有变动，以最后的取色为准 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">0</span>]</span>	= nowColor<span class="literal">[<span class="number">0</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">1</span>]</span>	= nowColor<span class="literal">[<span class="number">1</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">2</span>]</span>	= nowColor<span class="literal">[<span class="number">2</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum++;</span><br><span class="line">			&#125;<span class="keyword">else</span> <span class="keyword">if</span> ( drawStatus<span class="operator"> == </span><span class="number">2</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 删除图形 */</span></span><br><span class="line">				delete<span class="constructor">Poly( <span class="params">x</span>, <span class="params">y</span> )</span>;</span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> ( drawStatus<span class="operator"> == </span><span class="number">3</span> )</span><br><span class="line">			&#123;</span><br><span class="line">				moveNum = -<span class="number">1</span>;</span><br><span class="line">				for ( <span class="built_in">int</span> i = <span class="number">0</span>; i &lt; con; i++ )</span><br><span class="line">				&#123;</span><br><span class="line">					<span class="keyword">if</span> ( point<span class="constructor">InPoly( <span class="params">polygons</span>[<span class="params">i</span>], <span class="params">x</span>, <span class="params">y</span> )</span> )</span><br><span class="line">					&#123;</span><br><span class="line">						moveNum = i;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>大功告成！现在只要你存盘成功，不管对图形进行怎样的移动，删除操作。只要再点击读盘，就可以恢复到存盘时的状态，是不是非常酷炫。 大家可以尝试一下！</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>本篇文章说明了图形的删除，移动以及存盘读盘的功能。代码实现仅仅是我个人的思路，当然实现方式不止这一种，欢迎大家创新。 部分思路如果大家有更好的解决方法，欢迎同我交流，非常感谢。 总之希望对大家有帮助！小伙伴们加油！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-05-11 13:48:05" itemprop="dateCreated datePublished" datetime="2015-05-11T13:48:05+08:00">2015-05-11</time>
                </span>
                <span id="/1802.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例八之图形的移动删除存盘" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>22k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>20 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1783.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1783.html" class="post-title-link" itemprop="url">OpenGL绘图实例七之鼠标设色取点绘图</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>在上一节我们学习了鼠标监听事件，在这里我们就利用它来做一个实例，对鼠标监听事件进行一个综合的应用。</p>
                  <h2 id="要求"><a href="#要求" class="headerlink" title="要求"></a>要求</h2>
                  <p>1. 绘制如下的机器人，并在此基础上进行创作 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/图片1.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/图片1.png" alt="图片1"></a> 2. 对象创建：支持用户利用鼠标指定各个顶点位置，补充完整机器人的腿部。 3. 对象删除：支持用户选择一个腿部的多边形（与你的多边形保存的数据结构有关）并删除。 4. 对象存储：设计一种数据结构存储每个多边形的顶点与边，支持文件存盘，并支持读盘复原。 5. 支持用户选择多边形的颜色，支持用户移动多边形</p>
                  <h2 id="成果"><a href="#成果" class="headerlink" title="成果"></a>成果</h2>
                  <p>在这里为了动态演示，将我的成果以视频形式演示如下</p>
                  <p>[embed]<a href="http://qiniu.cuiqingcai.com/robot.mp4[/embed" target="_blank" rel="noopener">http://qiniu.cuiqingcai.com/robot.mp4[/embed</a>]</p>
                  <p>好，欣赏完视频之后是不是非常想知道是怎样实现的呢？下面我们来一步一步进行讲解。</p>
                  <h2 id="绘制半机器人"><a href="#绘制半机器人" class="headerlink" title="绘制半机器人"></a>绘制半机器人</h2>
                  <p>在前面的几篇中，已经详细描述了绘制机器人的方法，在这里我们简单贴一下代码来绘制一个半机器人。 直接上代码吧，不多说了</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">#include &lt;glut.h&gt;</span><br><span class="line">#include &lt;math.h&gt;</span><br><span class="line">#define PI <span class="number">3.1415926</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画矩形，传入的是左下角XY坐标和右上角XY坐标 */</span></span><br><span class="line"><span class="built_in">void</span> glRect( <span class="built_in">int</span> leftX, <span class="built_in">int</span> leftY, <span class="built_in">int</span> rightX, <span class="built_in">int</span> rightY )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 画封闭曲线 */</span></span><br><span class="line">	glBegin( GL_LINE_LOOP );</span><br><span class="line">	<span class="comment">/* 左下角 */</span></span><br><span class="line">	glVertex2d( leftX, leftY );</span><br><span class="line">	<span class="comment">/* 右下角 */</span></span><br><span class="line">	glVertex2d( rightX, leftY );</span><br><span class="line">	<span class="comment">/* 右上角 */</span></span><br><span class="line">	glVertex2d( rightX, rightY );</span><br><span class="line">	<span class="comment">/* 左上角 */</span></span><br><span class="line">	glVertex2d( leftX, rightY );</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画圆角矩形，传入矩形宽高，角半径，矩形中心点坐标 */</span></span><br><span class="line"><span class="built_in">void</span> glRoundRec( <span class="built_in">int</span> centerX, <span class="built_in">int</span> centerY, <span class="built_in">int</span> width, <span class="built_in">int</span> height, <span class="built_in">float</span> cirR )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 二分之PI，一个象限的角度 */</span></span><br><span class="line">	<span class="built_in">float</span> PI_HALF = PI / <span class="number">2</span>;</span><br><span class="line">	<span class="comment">/* 划分程度,值越大画得越精细 */</span></span><br><span class="line">	<span class="built_in">float</span> divide = <span class="number">20.0</span>;</span><br><span class="line">	<span class="comment">/* 圆角矩形的坐标 */</span></span><br><span class="line">	<span class="built_in">float</span> tx, ty;</span><br><span class="line">	<span class="comment">/* 画封闭曲线 */</span></span><br><span class="line">	glBegin( GL_LINE_LOOP );</span><br><span class="line">	<span class="comment">/* 四个象限不同的操作符 */</span></span><br><span class="line">	<span class="built_in">int</span>	opX[<span class="number">4</span>]	= &#123; <span class="number">1</span>, <span class="number">-1</span>, <span class="number">-1</span>, <span class="number">1</span> &#125;;</span><br><span class="line">	<span class="built_in">int</span>	opY[<span class="number">4</span>]	= &#123; <span class="number">1</span>, <span class="number">1</span>, <span class="number">-1</span>, <span class="number">-1</span> &#125;;</span><br><span class="line">	<span class="comment">/* 用来计数，从第一象限到第四象限 */</span></span><br><span class="line">	<span class="built_in">float</span> x = <span class="number">0</span>;</span><br><span class="line">	<span class="comment">/* x自增时加的值 */</span></span><br><span class="line">	<span class="built_in">float</span> part = <span class="number">1</span> / divide;</span><br><span class="line">	<span class="comment">/* 计算内矩形宽高一半的数值 */</span></span><br><span class="line">	<span class="built_in">int</span>	w	= width / <span class="number">2</span> - cirR;</span><br><span class="line">	<span class="built_in">int</span>	h	= height / <span class="number">2</span> - cirR;</span><br><span class="line">	<span class="comment">/* 循环画线 */</span></span><br><span class="line">	<span class="keyword">for</span> ( x = <span class="number">0</span>; x &lt; <span class="number">4</span>; x += part )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 求出弧度 */</span></span><br><span class="line">		<span class="built_in">float</span> rad = PI_HALF * x;</span><br><span class="line">		<span class="comment">/* 计算坐标值 */</span></span><br><span class="line">		tx	= cirR * cos( rad ) + opX[(<span class="built_in">int</span>) x] * w + centerX;</span><br><span class="line">		ty	= cirR * sin( rad ) + opY[(<span class="built_in">int</span>) x] * h + centerY;</span><br><span class="line">		<span class="comment">/*传入坐标画线 */</span></span><br><span class="line">		glVertex2f( tx, ty );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画弧线，相对偏移量XY，开始的弧度，结束的弧度，半径 */</span></span><br><span class="line"><span class="built_in">void</span> glArc( <span class="built_in">double</span> x, <span class="built_in">double</span> y, <span class="built_in">double</span> start_angle, <span class="built_in">double</span> end_angle, <span class="built_in">double</span> radius )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 开始绘制曲线 */</span></span><br><span class="line">	glBegin( GL_LINE_STRIP );</span><br><span class="line">	<span class="comment">/* 每次画增加的弧度 */</span></span><br><span class="line">	<span class="built_in">double</span> delta_angle = PI / <span class="number">180</span>;</span><br><span class="line">	<span class="comment">/* 画圆弧 */</span></span><br><span class="line">	<span class="keyword">for</span> ( <span class="built_in">double</span> i = start_angle; i &lt;= end_angle; i += delta_angle )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 绝对定位加三角函数值 */</span></span><br><span class="line">		<span class="built_in">double</span>	vx	= x + radius * cos( i );</span><br><span class="line">		<span class="built_in">double</span>	vy	= y + radius*sin( i );</span><br><span class="line">		glVertex2d( vx, vy );</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 结束绘画 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画圆 */</span></span><br><span class="line"><span class="built_in">void</span> glCircle( <span class="built_in">double</span> x, <span class="built_in">double</span> y, <span class="built_in">double</span> radius )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 画全圆 */</span></span><br><span class="line">	glArc( x, y, <span class="number">0</span>, <span class="number">2</span> * PI, radius );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画三角形，传入三个点的坐标 */</span></span><br><span class="line"><span class="built_in">void</span> glTri( <span class="built_in">int</span> x1, <span class="built_in">int</span> y1, <span class="built_in">int</span> x2, <span class="built_in">int</span> y2, <span class="built_in">int</span> x3, <span class="built_in">int</span> y3 )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 画封闭线 */</span></span><br><span class="line">	glBegin( GL_LINE_LOOP );</span><br><span class="line">	<span class="comment">/* 一点 */</span></span><br><span class="line">	glVertex2d( x1, y1 );</span><br><span class="line">	<span class="comment">/* 二点 */</span></span><br><span class="line">	glVertex2d( x2, y2 );</span><br><span class="line">	<span class="comment">/*三点 */</span></span><br><span class="line">	glVertex2d( x3, y3 );</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画线，传入两点坐标 */</span></span><br><span class="line"><span class="built_in">void</span> glLine( <span class="built_in">int</span> x1, <span class="built_in">int</span> y1, <span class="built_in">int</span> x2, <span class="built_in">int</span> y2 )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 画封闭线 */</span></span><br><span class="line">	glBegin( GL_LINE_STRIP );</span><br><span class="line">	<span class="comment">/* 一点 */</span></span><br><span class="line">	glVertex2d( x1, y1 );</span><br><span class="line">	<span class="comment">/* 二点 */</span></span><br><span class="line">	glVertex2d( x2, y2 );</span><br><span class="line">	<span class="comment">/* 结束画线 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 函数用来画图 */</span></span><br><span class="line"><span class="built_in">void</span> display( <span class="built_in">void</span> )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* GL_COLOR_BUFFER_BIT表示清除颜色 */</span></span><br><span class="line">	glClear( GL_COLOR_BUFFER_BIT );</span><br><span class="line">	<span class="comment">/* 设置画线颜色 */</span></span><br><span class="line">	glColor3f( <span class="number">0.5</span>, <span class="number">0.5</span>, <span class="number">0.5</span> );</span><br><span class="line">	<span class="comment">/* 画点大小 */</span></span><br><span class="line">	glPointSize( <span class="number">2</span> );</span><br><span class="line">	<span class="comment">/* 画圆角矩形，大肚子 */</span></span><br><span class="line">	glRoundRec( <span class="number">0</span>, <span class="number">0</span>, <span class="number">146</span>, <span class="number">120</span>, <span class="number">15</span> );</span><br><span class="line">	<span class="comment">/* 画圆，中间小圈 */</span></span><br><span class="line">	glCircle( <span class="number">0</span>, <span class="number">0</span>, <span class="number">10</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，脖子 */</span></span><br><span class="line">	glRect( <span class="number">-25</span>, <span class="number">60</span>, <span class="number">25</span>, <span class="number">76</span> );</span><br><span class="line">	<span class="comment">/* 画圆角矩形，大脸 */</span></span><br><span class="line">	glRoundRec( <span class="number">0</span>, <span class="number">113</span>, <span class="number">128</span>, <span class="number">74</span>, <span class="number">10</span> );</span><br><span class="line">	<span class="comment">/* 两个眼睛 */</span></span><br><span class="line">	glCircle( <span class="number">-30</span>, <span class="number">111</span>, <span class="number">10</span> );</span><br><span class="line">	glCircle( <span class="number">30</span>, <span class="number">111</span>, <span class="number">10</span> );</span><br><span class="line">	<span class="comment">/* 两条天线 */</span></span><br><span class="line">	glLine( <span class="number">-35</span>, <span class="number">150</span>, <span class="number">-35</span>, <span class="number">173</span> );</span><br><span class="line">	glLine( <span class="number">35</span>, <span class="number">150</span>, <span class="number">35</span>, <span class="number">173</span> );</span><br><span class="line">	<span class="comment">/* 圆角矩形，两个耳朵 */</span></span><br><span class="line">	glRoundRec( <span class="number">81</span>, <span class="number">115</span>, <span class="number">20</span>, <span class="number">34</span>, <span class="number">5</span> );</span><br><span class="line">	glRoundRec( <span class="number">-81</span>, <span class="number">115</span>, <span class="number">20</span>, <span class="number">34</span>, <span class="number">5</span> );</span><br><span class="line">	<span class="comment">/* 圆弧，画嘴 */</span></span><br><span class="line">	glArc( <span class="number">0</span>, <span class="number">133</span>, <span class="number">11</span> * PI / <span class="number">8</span>, <span class="number">13</span> * PI / <span class="number">8</span>, <span class="number">45</span> );</span><br><span class="line">	<span class="comment">/* 画三角，肚子里的三角 */</span></span><br><span class="line">	glTri( <span class="number">-30</span>, <span class="number">-15</span>, <span class="number">30</span>, <span class="number">-15</span>, <span class="number">0</span>, <span class="number">28</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，胳膊连接处 */</span></span><br><span class="line">	glRect( <span class="number">-81</span>, <span class="number">43</span>, <span class="number">-73</span>, <span class="number">25</span> );</span><br><span class="line">	glRect( <span class="number">81</span>, <span class="number">43</span>, <span class="number">73</span>, <span class="number">25</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，上臂 */</span></span><br><span class="line">	glRect( <span class="number">-108</span>, <span class="number">45</span>, <span class="number">-81</span>, <span class="number">0</span> );</span><br><span class="line">	glRect( <span class="number">108</span>, <span class="number">45</span>, <span class="number">81</span>, <span class="number">0</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，中臂 */</span></span><br><span class="line">	glRect( <span class="number">-101</span>, <span class="number">0</span>, <span class="number">-88</span>, <span class="number">-4</span> );</span><br><span class="line">	glRect( <span class="number">101</span>, <span class="number">0</span>, <span class="number">88</span>, <span class="number">-4</span> );</span><br><span class="line">	<span class="comment">/* 画矩形，下臂 */</span></span><br><span class="line">	glRect( <span class="number">-108</span>, <span class="number">-4</span>, <span class="number">-81</span>, <span class="number">-37</span> );</span><br><span class="line">	glRect( <span class="number">108</span>, <span class="number">-4</span>, <span class="number">81</span>, <span class="number">-37</span> );</span><br><span class="line">	<span class="comment">/* 画圆形，手掌 */</span></span><br><span class="line">	glCircle( <span class="number">-95</span>, <span class="number">-47</span>, <span class="number">10</span> );</span><br><span class="line">	glCircle( <span class="number">95</span>, <span class="number">-47</span>, <span class="number">10</span> );</span><br><span class="line">	<span class="comment">/* 保证前面的OpenGL命令立即执行，而不是让它们在缓冲区中等待 */</span></span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 窗口大小变化时调用的函数 */</span></span><br><span class="line"><span class="built_in">void</span> ChangeSize( GLsizei w, GLsizei h )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 避免高度为0 */</span></span><br><span class="line">	<span class="keyword">if</span> ( h == <span class="number">0</span> )</span><br><span class="line">	&#123;</span><br><span class="line">		h = <span class="number">1</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 定义视口大小，宽高一致 */</span></span><br><span class="line">	glViewport( <span class="number">0</span>, <span class="number">0</span>, w, h );</span><br><span class="line">	<span class="built_in">int</span> half = <span class="number">300</span>;</span><br><span class="line">	<span class="comment">/* 重置坐标系统，使投影变换复位 */</span></span><br><span class="line">	glMatrixMode( GL_PROJECTION );</span><br><span class="line">	<span class="comment">/* 将当前的用户坐标系的原点移到了屏幕中心 */</span></span><br><span class="line">	glLoadIdentity();</span><br><span class="line">	<span class="comment">/* 定义正交视域体 */</span></span><br><span class="line">	<span class="keyword">if</span> ( w &lt; h )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果高度大于宽度，则将高度视角扩大，图形显示居中 */</span></span><br><span class="line">		glOrtho( -half, half, -half * h / w, half * h / w, -half, half );</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="comment">/* 如果宽度大于高度，则将宽度视角扩大，图形显示居中 */</span></span><br><span class="line">		glOrtho( -half * w / h, half * w / h, -half, half, -half, half );</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*程序入口 */</span></span><br><span class="line"><span class="built_in">int</span> main( <span class="built_in">int</span> argc, char *argv[] )</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 对GLUT进行初始化，并处理所有的命令行参数 */</span></span><br><span class="line">	glutInit( &amp;argc, argv );</span><br><span class="line">	<span class="comment">/* 指定RGB颜色模式和单缓冲窗口 */</span></span><br><span class="line">	glutInitDisplayMode( GLUT_RGB | GLUT_SINGLE );</span><br><span class="line">	<span class="comment">/* 定义窗口的位置 */</span></span><br><span class="line">	glutInitWindowPosition( <span class="number">100</span>, <span class="number">100</span> );</span><br><span class="line">	<span class="comment">/* 定义窗口的大小 */</span></span><br><span class="line">	glutInitWindowSize( <span class="number">600</span>, <span class="number">600</span> );</span><br><span class="line">	<span class="comment">/* 创建窗口，同时为之命名 */</span></span><br><span class="line">	glutCreateWindow( <span class="string">"OpenGL"</span> );</span><br><span class="line">	<span class="comment">/* 设置窗口清除颜色为白色 */</span></span><br><span class="line">	glClearColor( <span class="number">1.0f</span>, <span class="number">1.0f</span>, <span class="number">1.0f</span>, <span class="number">1.0f</span> );</span><br><span class="line">	<span class="comment">/* 参数为一个函数，绘图时这个函数就会被调用 */</span></span><br><span class="line">	glutDisplayFunc( &amp;display );</span><br><span class="line">	<span class="comment">/* 参数为一个函数，当窗口大小改变时会被调用 */</span></span><br><span class="line">	glutReshapeFunc( ChangeSize );</span><br><span class="line">	<span class="comment">/* 该函数让GLUT框架开始运行，所有设置的回调函数开始工作，直到用户终止程序为止 */</span></span><br><span class="line">	glutMainLoop();</span><br><span class="line">	<span class="comment">/*程序返回 */</span></span><br><span class="line">	<span class="keyword">return</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果如下 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150511002257.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150511002257.jpg" alt="20150511002257"></a> 这一步非常非常简单，如果有不懂的小伙伴请参见 <a href="http://cuiqingcai.com/1597.html">此文章</a>。</p>
                  <h2 id="对象创建"><a href="#对象创建" class="headerlink" title="对象创建"></a>对象创建</h2>
                  <p>通过上面的一步，我们已经可以轻松地绘制出一个半身机器人，接下来我们就要通过监听鼠标事件来实现动态多边形的绘制了。 因为实验要求中要求了多边形的颜色绘制，所以颜色怎么选取呢？我是这么想的，在面板的左上角绘制几个色块，通过鼠标点击这几个色块，读取出RGB值，然后相应地设置当前绘图的颜色即可。 所以首先我在左上角定义了几个颜色色块，同时监听鼠标事件。 首先定义几个颜色的RGB值</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 各种颜色 */</span></span><br><span class="line">GLubyte border[<span class="number">3</span>] = &#123;<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>&#125;;</span><br><span class="line">GLubyte grey[<span class="number">3</span>] = &#123;<span class="number">195</span>, <span class="number">195</span>, <span class="number">195</span>&#125;;</span><br><span class="line">GLubyte yellow[<span class="number">3</span>] = &#123;<span class="number">255</span>, <span class="number">243</span>, <span class="number">0</span>&#125;;</span><br><span class="line">GLubyte red[<span class="number">3</span>] = &#123;<span class="number">237</span>, <span class="number">28</span>, <span class="number">36</span>&#125;;</span><br><span class="line">GLubyte darkGrey[<span class="number">3</span>] = &#123;<span class="number">126</span>, <span class="number">126</span>, <span class="number">126</span>&#125;;</span><br><span class="line">GLubyte white[<span class="number">3</span>] = &#123;<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>&#125;;</span><br><span class="line"><span class="comment">/* 当前颜色 */</span></span><br><span class="line">GLubyte nowColor[<span class="number">3</span>] = &#123;<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>然后定义一个绘制填充色的圆形的方法</p>
                  <figure class="highlight processing">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 绘制填充的圆形 */</span></span><br><span class="line"><span class="keyword">void</span> glColorCircle(<span class="built_in">int</span> x, <span class="built_in">int</span> y, <span class="built_in">int</span> R, GLubyte <span class="built_in">color</span>[<span class="number">3</span>])</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 开始绘制曲线 */</span></span><br><span class="line">	glBegin(GL_POLYGON);</span><br><span class="line">	<span class="comment">/* 设置颜色 */</span></span><br><span class="line">	glColor3ub(<span class="built_in">color</span>[<span class="number">0</span>], <span class="built_in">color</span>[<span class="number">1</span>], <span class="built_in">color</span>[<span class="number">2</span>]);</span><br><span class="line">	<span class="comment">/* 每次画增加的弧度 */</span></span><br><span class="line">	<span class="keyword">double</span> delta_angle = <span class="literal">PI</span> / <span class="number">180</span>;</span><br><span class="line">	<span class="comment">/* 画圆弧 */</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="keyword">double</span> i = <span class="number">0</span>; i &lt;= <span class="number">2</span> * <span class="literal">PI</span>; i += delta_angle)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 绝对定位加三角函数值 */</span></span><br><span class="line">		<span class="keyword">double</span>	vx	= x + R * <span class="built_in">cos</span>(i);</span><br><span class="line">		<span class="keyword">double</span>	vy	= y + R*<span class="built_in">sin</span>(i);</span><br><span class="line">		glVertex2d(vx, vy);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 结束绘画 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>那么在display函数中，我们就可以调用下面的方法来绘制三个取色盘拾取颜色，其中最后一个取色盘保存了当前的颜色。</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 绘制取色盘 */</span></span><br><span class="line">glColorCircle(<span class="number">-280</span>, <span class="number">280</span>, <span class="number">10</span>, red);</span><br><span class="line">glColorCircle(<span class="number">-250</span>, <span class="number">280</span>, <span class="number">10</span>, yellow);</span><br><span class="line">glColorCircle(<span class="number">-220</span>, <span class="number">280</span>, <span class="number">10</span>, grey);</span><br><span class="line">glColorCircle(<span class="number">-180</span>, <span class="number">280</span>, <span class="number">10</span>, nowColor);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这样光有了取色盘可不行，需要有鼠标点击事动态地改变取色的色值。现在我们可以加入鼠标监听方法如下 通过上一节的说明，我们定义一个mouseClick事件</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line">void mouse<span class="constructor">Click(<span class="params">int</span> <span class="params">btn</span>, <span class="params">int</span> <span class="params">state</span>, <span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="built_in">int</span> optionHeight = <span class="number">40</span>;</span><br><span class="line">	<span class="built_in">int</span> optionWidth = <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> (btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &lt; optionWidth)</span><br><span class="line">		&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">nowColor</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor<span class="literal">[<span class="number">0</span>]</span>, nowColor<span class="literal">[<span class="number">1</span>]</span>, nowColor<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			gl<span class="constructor">ColorCircle(-180, 280, 10, <span class="params">nowColor</span>)</span>;</span><br><span class="line">		<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &gt; optionWidth) &#123;</span><br><span class="line"></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>另外加入监听方法</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/*鼠标点击事件，鼠标点击或者松开时调用 */</span></span><br><span class="line"> glut<span class="constructor">MouseFunc(<span class="params">mouseClick</span>)</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在这里有几个地方需要说明一下。</p>
                  <h3 id="1-选项卡的分界范围是什么？"><a href="#1-选项卡的分界范围是什么？" class="headerlink" title="1.选项卡的分界范围是什么？"></a>1.选项卡的分界范围是什么？</h3>
                  <p>其实我是把整个画面分割成了三部分，其中最上面40像素的一个长条就是选项卡，选项卡又分为了两部分。左边是取色板，右边是绘制的选项，比如取点，绘制，删除等等的操作。所以，optionHeight 就指的是上面的40像素的分割线，optionWidth是中间的分割线，即上方调色板和绘制选项点的分割线。 通过鼠标点击判断是在哪个范围内从而响应不同的事件。 从而鼠标监听事件就是下面的结构了</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> (y &lt; optionHeight &amp;&amp; x &lt; optionWidth)</span><br><span class="line">		&#123;</span><br><span class="line">			glReadPixels(x, <span class="number">2</span> * halfHeight - y, <span class="number">1</span>, <span class="number">1</span>, GL_RGB, GL_UNSIGNED_BYTE, &amp;nowColor);</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor[<span class="number">0</span>], nowColor[<span class="number">1</span>], nowColor[<span class="number">2</span>]);</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			glColorCircle(<span class="number">-180</span>, <span class="number">280</span>, <span class="number">10</span>, nowColor);</span><br><span class="line">		<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> (y &lt; optionHeight &amp;&amp; x &gt; optionWidth) &#123;</span><br><span class="line"></span><br><span class="line">		<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			</span><br><span class="line">		&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>其中第四个色板就是显示了当前的颜色，在-180,280的位置绘制了当前的颜色色盘。并同时颜色值保存在了nowColor中。</p>
                  <h3 id="2-halfHeight-和-halfWidth"><a href="#2-halfHeight-和-halfWidth" class="headerlink" title="2. halfHeight 和 halfWidth"></a>2. halfHeight 和 halfWidth</h3>
                  <p>这里定义了halfHeight和halfWdith，在后面的绘图中会用到，同时在取色时也会用到，实际就是整个窗口宽高的一半，定义为全局变量即可。如当前的窗口是600x600，所以现在二者就都是300,300. 到现在，如果你按照流程走下来，代码是可以正常运行的，现在可以通过点击左上角的色盘进行取色，同时第四个色盘显示了当前的颜色。运行结果截图如下 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150511005807.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150511005807.jpg" alt="20150511005807"></a> 好，接下来我们就进行多边形的定义了，多边形的定义我们利用结构体的形式，假设我们绘制的边数最大是10，可以定义如下的多边形结构体，结构体中包含了顶点坐标（数组形式），顶点数量，颜色（RGB）。</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 每个图形最多的顶点数 */</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">define</span> MAX_VERTEX 10</span></span><br><span class="line"><span class="comment">/* 画的图形最多的个数 */</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">define</span> MAX_PLOY 10</span></span><br><span class="line"><span class="comment">/* 多边形结构体 */</span></span><br><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">polygon</span> &#123;</span></span><br><span class="line">	<span class="comment">/* 顶点坐标 */</span></span><br><span class="line">	<span class="keyword">int</span> x[MAX_VERTEX];</span><br><span class="line">	<span class="keyword">int</span> y[MAX_VERTEX];</span><br><span class="line">	<span class="comment">/* 定义第几个顶点 */</span></span><br><span class="line">	<span class="keyword">int</span> verNum;</span><br><span class="line">	GLubyte color[<span class="number">3</span>];</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">/* 声明多边形数组 */</span></span><br><span class="line">polygon polygons[MAX_PLOY];</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>为了便于记录，我们定义一个con变量来记录当前绘制到了哪个多边形</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 记录画了几个多边形 */</span></span><br><span class="line"><span class="built_in">int</span> con = <span class="number">0</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>好，定义好结构体之后，我们就可以先选取点，然后绘制多边形了。所以在这里我们定义两个按钮，取点和绘制。 定义两个颜色</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">GLubyte startBtn[<span class="number">3</span>] = &#123;<span class="number">10</span>, <span class="number">10</span>, <span class="number">10</span>&#125;;</span><br><span class="line">GLubyte endBtn[<span class="number">3</span>] = &#123;<span class="number">20</span>, <span class="number">20</span>, <span class="number">20</span>&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们可以用颜色来区分不同的按钮，现在原来的display函数中画上这俩按钮。</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glColorCircle(<span class="number">250</span>, <span class="number">280</span>, <span class="number">10</span>, startBtn);</span><br><span class="line">glColorCircle(<span class="number">280</span>, <span class="number">280</span>, <span class="number">10</span>, endBtn);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>如图所示，当我们要取点的时候就可以点击一下左边的按钮，取完点后就可以点击右边的按钮完成绘制。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150511010802.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150511010802.jpg" alt="QQ截图20150511010802"></a> 在鼠标监听事件中，当点击了左边的按钮，便开始拾取几个顶点，然后点击右边的按钮之后，会将图形绘制出来。所以为了区分当前是在拾取点还是完成绘制，我们定义一个状态变量叫drawStatus</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 绘制多边形的起始标志，0是开始绘制，1是结束绘制，初始为-1 */</span></span><br><span class="line"><span class="built_in">int</span> drawStatus = <span class="number">-1</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在原来的mouseClick函数中，对于判断点击右上方选项卡的响应就可以改写如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line">void mouse<span class="constructor">Click(<span class="params">int</span> <span class="params">btn</span>, <span class="params">int</span> <span class="params">state</span>, <span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="built_in">int</span> optionHeight = <span class="number">40</span>;</span><br><span class="line">	<span class="built_in">int</span> optionWidth = <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> (btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &lt; optionWidth)</span><br><span class="line">		&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">nowColor</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor<span class="literal">[<span class="number">0</span>]</span>, nowColor<span class="literal">[<span class="number">1</span>]</span>, nowColor<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			gl<span class="constructor">ColorCircle(-180, 280, 10, <span class="params">nowColor</span>)</span>;</span><br><span class="line">		<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &gt; optionWidth) &#123;</span><br><span class="line">			<span class="comment">//取当前的点</span></span><br><span class="line">			GLubyte color<span class="literal">[<span class="number">3</span>]</span>;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">color</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, color<span class="literal">[<span class="number">0</span>]</span>, color<span class="literal">[<span class="number">1</span>]</span>, color<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 如果点击了开始绘制的按钮 */</span></span><br><span class="line">			<span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">startBtn</span>)</span>) &#123;</span><br><span class="line">				drawStatus = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 开始画一个图形，顶点个数置零 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum = <span class="number">0</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			<span class="comment">/* 如果点击了结束绘制的按钮 */</span></span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">endBtn</span>)</span>) &#123;</span><br><span class="line">				glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">				<span class="comment">/* 画的图形个数加一 */</span></span><br><span class="line">				con++;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>其中sameColor方法就是来判断当前点击的位置是否和按钮颜色相等，在这里为了避免误差，我们像往常一样设置一个容差。</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 判断两个颜色是否相等 */</span></span><br><span class="line"><span class="built_in">bool</span> sameColor(GLubyte color1[<span class="number">3</span>], GLubyte color2[<span class="number">3</span>])</span><br><span class="line">&#123;</span><br><span class="line"> <span class="keyword">if</span> (color1[<span class="number">0</span>] - color2[<span class="number">0</span>] &lt; <span class="number">5</span> &amp;&amp; color1[<span class="number">1</span>] - color2[<span class="number">1</span>] &lt; <span class="number">5</span> &amp;&amp; color1[<span class="number">2</span>] - color2[<span class="number">1</span>] &lt; <span class="number">5</span>)</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="keyword">return</span>(<span class="literal">true</span>);</span><br><span class="line"> &#125; <span class="keyword">else</span> &#123;</span><br><span class="line"> <span class="keyword">return</span>(<span class="literal">false</span>);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>好，当点击了第一个黑色按钮（取点的按钮）时，我们便可以在下方拾取点来保存到数组中了。 在最后的else代码块中加入如下的方法，用来取点。 这里的取点是取到了点击的坐标值，当前的RGB值，每取一个点，响应的verNum（顶点数目）就加一。 而且当前保存到的多边形是polygons[con]，con初始值为0，也就是保存到第一个多边形结构体中。 当我们点击了开始绘制按钮时，con会加1，并且将保存的多边形绘制出来。</p>
                  <figure class="highlight prolog">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 如果当前是正在取点状态 */</span></span><br><span class="line">			if (drawStatus == <span class="number">0</span>)</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 保存每个点，然后该图形顶点个数加一 */</span></span><br><span class="line">				polygons[con].x[polygons[con].verNum]	= x;</span><br><span class="line">				polygons[con].y[polygons[con].verNum]	= y;</span><br><span class="line">				<span class="comment">/* 画点 */</span></span><br><span class="line">				glPoints(x, y);</span><br><span class="line">				<span class="comment">/* 设置当前颜色RGB，如果取色有变动，以最后的取色为准 */</span> </span><br><span class="line">				polygons[con].color[<span class="number">0</span>] = nowColor[<span class="number">0</span>];</span><br><span class="line">				polygons[con].color[<span class="number">1</span>] = nowColor[<span class="number">1</span>];</span><br><span class="line">				polygons[con].color[<span class="number">2</span>] = nowColor[<span class="number">2</span>];</span><br><span class="line">				printf(<span class="string">"polyColor%d%d%d\n"</span>, polygons[con].color[<span class="number">0</span>],polygons[con].color[<span class="number">1</span>],polygons[con].color[<span class="number">2</span>]);</span><br><span class="line">				polygons[con].verNum++;</span><br><span class="line">				printf(<span class="string">"con:%d,verNum:%d\n"</span>, con, polygons[con].verNum);</span><br><span class="line">			&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>到现在上面的mouseClick方法就变成了</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line">void mouse<span class="constructor">Click(<span class="params">int</span> <span class="params">btn</span>, <span class="params">int</span> <span class="params">state</span>, <span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="built_in">int</span> optionHeight = <span class="number">40</span>;</span><br><span class="line">	<span class="built_in">int</span> optionWidth = <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> (btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &lt; optionWidth)</span><br><span class="line">		&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">nowColor</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor<span class="literal">[<span class="number">0</span>]</span>, nowColor<span class="literal">[<span class="number">1</span>]</span>, nowColor<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			gl<span class="constructor">ColorCircle(-180, 280, 10, <span class="params">nowColor</span>)</span>;</span><br><span class="line">		<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> (y &lt; optionHeight<span class="operator"> &amp;&amp; </span>x &gt; optionWidth) &#123;</span><br><span class="line">			<span class="comment">//取当前的点</span></span><br><span class="line">			GLubyte color<span class="literal">[<span class="number">3</span>]</span>;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>, 2 <span class="operator">*</span> <span class="params">halfHeight</span> - <span class="params">y</span>, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, &amp;<span class="params">color</span>)</span>;</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, color<span class="literal">[<span class="number">0</span>]</span>, color<span class="literal">[<span class="number">1</span>]</span>, color<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">			<span class="comment">/* 如果点击了开始绘制的按钮 */</span></span><br><span class="line">			<span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">startBtn</span>)</span>) &#123;</span><br><span class="line">				drawStatus = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 开始画一个图形，顶点个数置零 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum = <span class="number">0</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			<span class="comment">/* 如果点击了结束绘制的按钮 */</span></span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (same<span class="constructor">Color(<span class="params">color</span>, <span class="params">endBtn</span>)</span>) &#123;</span><br><span class="line">				glut<span class="constructor">PostRedisplay()</span>;</span><br><span class="line">				<span class="comment">/* 画的图形个数加一 */</span></span><br><span class="line">				con++;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="comment">/* 如果当前是正在取点状态 */</span></span><br><span class="line">			<span class="keyword">if</span> (drawStatus<span class="operator"> == </span><span class="number">0</span>)</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 保存每个点，然后该图形顶点个数加一 */</span></span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.x<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= x;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.y<span class="literal">[<span class="identifier">polygons</span>[<span class="identifier">con</span>]</span>.verNum]	= y;</span><br><span class="line">				<span class="comment">/* 画点 */</span></span><br><span class="line">				gl<span class="constructor">Points(<span class="params">x</span>, <span class="params">y</span>)</span>;</span><br><span class="line">				<span class="comment">/* 设置当前颜色RGB，如果取色有变动，以最后的取色为准 */</span> </span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">0</span>]</span> = nowColor<span class="literal">[<span class="number">0</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">1</span>]</span> = nowColor<span class="literal">[<span class="number">1</span>]</span>;</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">2</span>]</span> = nowColor<span class="literal">[<span class="number">2</span>]</span>;</span><br><span class="line">				printf(<span class="string">"polyColor%d%d%d\n"</span>, polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">0</span>]</span>,polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">1</span>]</span>,polygons<span class="literal">[<span class="identifier">con</span>]</span>.color<span class="literal">[<span class="number">2</span>]</span>);</span><br><span class="line">				polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum++;</span><br><span class="line">				printf(<span class="string">"con:%d,verNum:%d\n"</span>, con, polygons<span class="literal">[<span class="identifier">con</span>]</span>.verNum);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在这里有几点说明如下</p>
                  <h3 id="1-glPoints方法"><a href="#1-glPoints方法" class="headerlink" title="1.glPoints方法"></a>1.glPoints方法</h3>
                  <p>即画点方法，为了直观地显示用户选取了哪个点，我们设置了这个画点的方法，每点一个点，就在屏幕上显示出来。 方法定义如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 画点 */</span></span><br><span class="line">void gl<span class="constructor">Points(<span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span> &#123;</span><br><span class="line">	gl<span class="constructor">Begin(GL_POINTS)</span>;</span><br><span class="line">	<span class="comment">/* 点直接设置为黑色 */</span></span><br><span class="line">	gl<span class="constructor">Color3ub(0, 0, 0)</span>;</span><br><span class="line">	gl<span class="constructor">Vertex2d(<span class="params">x</span> - <span class="params">halfWidth</span>, <span class="params">halfHeight</span> - <span class="params">y</span>)</span>;</span><br><span class="line">	gl<span class="constructor">End()</span>;</span><br><span class="line">	gl<span class="constructor">Flush()</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在这里，glVertex2d方法的参数为什么不是x，y呢？很简单，因为我们绘画时的坐标原点是窗口的中心点，而鼠标点击的坐标原点是左上角，为了做一个映射变换，x需要减去halfWidth，y需要取反并加halfWidth。总之定义这两个half变量还是用处多多的。</p>
                  <h3 id="2-glutPostRedisplay"><a href="#2-glutPostRedisplay" class="headerlink" title="2.glutPostRedisplay"></a><strong>2.glutPostRedisplay</strong></h3>
                  <p>这个方法就是重新绘制的方法，我们看到在结束绘制的地方调用了这个方法，其实就是重新调用了display方法，所以为了让我们绘制的图形正常显示，我们需要在display方法中来绘制我们已经存储好的多边形。我们可以把绘制多边形定义为一个方法，然后在display中调用即可。 绘制多边形的方法如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 绘制多边形 */</span></span><br><span class="line">void gl<span class="constructor">Polygons()</span></span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">if</span> (con&gt;=<span class="number">0</span>) &#123;</span><br><span class="line">		for (<span class="built_in">int</span> i = <span class="number">0</span>; i &lt;= con; i++) &#123;</span><br><span class="line">			<span class="comment">/* 取到这个多边形 */</span></span><br><span class="line">			polygon poly	= polygons<span class="literal">[<span class="identifier">i</span>]</span>;</span><br><span class="line">			<span class="comment">/* 画封闭线 */</span></span><br><span class="line">			gl<span class="constructor">Begin(GL_LINE_LOOP)</span>;</span><br><span class="line">			<span class="built_in">int</span> num = poly.verNum;</span><br><span class="line">			printf(<span class="string">"num:%d\n"</span>,num);</span><br><span class="line">			for (<span class="built_in">int</span> j = <span class="number">0</span>; j &lt; num; j++)</span><br><span class="line">			&#123;</span><br><span class="line">				gl<span class="constructor">Color3ub(<span class="params">poly</span>.<span class="params">color</span>[0], <span class="params">poly</span>.<span class="params">color</span>[1], <span class="params">poly</span>.<span class="params">color</span>[2])</span>;</span><br><span class="line">				gl<span class="constructor">Vertex2d(<span class="params">poly</span>.<span class="params">x</span>[<span class="params">j</span>] - <span class="params">halfWidth</span>, <span class="params">halfHeight</span> - <span class="params">poly</span>.<span class="params">y</span>[<span class="params">j</span>])</span>;</span><br><span class="line">				printf(<span class="string">"polyx:%d,polyy:%d"</span>,poly.x<span class="literal">[<span class="identifier">j</span>]</span>,poly.y<span class="literal">[<span class="identifier">j</span>]</span>);</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">/* 结束画线 */</span></span><br><span class="line">			gl<span class="constructor">End()</span>;</span><br><span class="line">			<span class="comment">/* 刷新 */</span></span><br><span class="line">			gl<span class="constructor">Flush()</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在display函数中调用一下即可，方法的最后面调用一下。</p>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 绘制多边形 */</span></span><br><span class="line">	<span class="selector-tag">glPolygons</span>();</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>好，现在我们点击第一个黑色圆点，然后在屏幕上取点，取完点之后，然后点击右上角的黑色圆点，即可完成绘制 运行结果如下 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150511013259.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150511013259.jpg" alt="QQ截图20150511013259"></a> 在此先告一段落，下一篇我们接着这里来实现图形的删除，移动以及存盘，读盘等操作。</p>
                  <h2 id="本节代码"><a href="#本节代码" class="headerlink" title="本节代码"></a>本节代码</h2>
                  <p>到这里，提供如下代码，代码运行结果即为上图所示，由于代码太长，不完全展开显示，<strong>双击查看全部代码</strong>。</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">#include &lt;glut.h&gt;</span><br><span class="line">#include &lt;math.h&gt; </span><br><span class="line">#include &lt;stdio.h&gt;</span><br><span class="line"></span><br><span class="line">#define PI <span class="number">3.1415926</span></span><br><span class="line"><span class="comment">/* 每个图形最多的顶点数 */</span></span><br><span class="line">#define MAX_VERTEX <span class="number">10</span></span><br><span class="line"><span class="comment">/* 画的图形最多的个数 */</span></span><br><span class="line">#define MAX_PLOY <span class="number">10</span></span><br><span class="line"><span class="comment">/* 窗口长宽的一半 */</span></span><br><span class="line"><span class="built_in">int</span> halfWidth, halfHeight;</span><br><span class="line"><span class="comment">/* 绘制多边形的起始标志，0是开始绘制，1是结束绘制，初始为-1 */</span></span><br><span class="line"><span class="built_in">int</span> drawStatus = <span class="number">-1</span>;</span><br><span class="line"><span class="comment">/* 多边形结构体 */</span></span><br><span class="line">struct polygon &#123;</span><br><span class="line">	<span class="comment">/* 顶点坐标 */</span></span><br><span class="line">	<span class="built_in">int</span> x[MAX_VERTEX];</span><br><span class="line">	<span class="built_in">int</span> y[MAX_VERTEX];</span><br><span class="line">	<span class="comment">/* 定义第几个顶点 */</span></span><br><span class="line">	<span class="built_in">int</span> verNum;</span><br><span class="line">	GLubyte color[<span class="number">3</span>];</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">/* 各种颜色 */</span></span><br><span class="line">GLubyte border[<span class="number">3</span>] = &#123;<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>&#125;;</span><br><span class="line">GLubyte grey[<span class="number">3</span>] = &#123;<span class="number">195</span>, <span class="number">195</span>, <span class="number">195</span>&#125;;</span><br><span class="line">GLubyte yellow[<span class="number">3</span>] = &#123;<span class="number">255</span>, <span class="number">243</span>, <span class="number">0</span>&#125;;</span><br><span class="line">GLubyte red[<span class="number">3</span>] = &#123;<span class="number">237</span>, <span class="number">28</span>, <span class="number">36</span>&#125;;</span><br><span class="line">GLubyte darkGrey[<span class="number">3</span>] = &#123;<span class="number">126</span>, <span class="number">126</span>, <span class="number">126</span>&#125;;</span><br><span class="line">GLubyte white[<span class="number">3</span>] = &#123;<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>&#125;;</span><br><span class="line">GLubyte startBtn[<span class="number">3</span>] = &#123;<span class="number">10</span>, <span class="number">10</span>, <span class="number">10</span>&#125;;</span><br><span class="line">GLubyte endBtn[<span class="number">3</span>] = &#123;<span class="number">20</span>, <span class="number">20</span>, <span class="number">20</span>&#125;;</span><br><span class="line"><span class="comment">/* 当前颜色 */</span></span><br><span class="line">GLubyte nowColor[<span class="number">3</span>] = &#123;<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>&#125;;</span><br><span class="line"><span class="comment">/* 声明多边形数组 */</span></span><br><span class="line">polygon polygons[MAX_PLOY];</span><br><span class="line"><span class="comment">/* 记录画了几个多边形 */</span></span><br><span class="line"><span class="built_in">int</span> con = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 绘制多边形 */</span></span><br><span class="line"><span class="built_in">void</span> glPolygons()</span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">if</span> (con&gt;=<span class="number">0</span>) &#123;</span><br><span class="line">		<span class="keyword">for</span> (<span class="built_in">int</span> i = <span class="number">0</span>; i &lt;= con; i++) &#123;</span><br><span class="line">			<span class="comment">/* 取到这个多边形 */</span></span><br><span class="line">			polygon poly	= polygons[i];</span><br><span class="line">			<span class="comment">/* 画封闭线 */</span></span><br><span class="line">			glBegin(GL_LINE_LOOP);</span><br><span class="line">			<span class="built_in">int</span> num = poly.verNum;</span><br><span class="line">			printf(<span class="string">"num:%d\n"</span>,num);</span><br><span class="line">			<span class="keyword">for</span> (<span class="built_in">int</span> j = <span class="number">0</span>; j &lt; num; j++)</span><br><span class="line">			&#123;</span><br><span class="line">				glColor3ub(poly.color[<span class="number">0</span>], poly.color[<span class="number">1</span>], poly.color[<span class="number">2</span>]);</span><br><span class="line">				glVertex2d(poly.x[j] - halfWidth, halfHeight - poly.y[j]);</span><br><span class="line">				printf(<span class="string">"polyx:%d,polyy:%d"</span>,poly.x[j],poly.y[j]);</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">/* 结束画线 */</span></span><br><span class="line">			glEnd();</span><br><span class="line">			<span class="comment">/* 刷新 */</span></span><br><span class="line">			glFlush();</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 绘制填充的圆形 */</span></span><br><span class="line"><span class="built_in">void</span> glColorCircle(<span class="built_in">int</span> x, <span class="built_in">int</span> y, <span class="built_in">int</span> R, GLubyte color[<span class="number">3</span>])</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 开始绘制曲线 */</span></span><br><span class="line">	glBegin(GL_POLYGON);</span><br><span class="line">	<span class="comment">/* 设置颜色 */</span></span><br><span class="line">	glColor3ub(color[<span class="number">0</span>], color[<span class="number">1</span>], color[<span class="number">2</span>]);</span><br><span class="line">	<span class="comment">/* 每次画增加的弧度 */</span></span><br><span class="line">	<span class="built_in">double</span> delta_angle = PI / <span class="number">180</span>;</span><br><span class="line">	<span class="comment">/* 画圆弧 */</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="built_in">double</span> i = <span class="number">0</span>; i &lt;= <span class="number">2</span> * PI; i += delta_angle)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 绝对定位加三角函数值 */</span></span><br><span class="line">		<span class="built_in">double</span>	vx	= x + R * cos(i);</span><br><span class="line">		<span class="built_in">double</span>	vy	= y + R*sin(i);</span><br><span class="line">		glVertex2d(vx, vy);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">/* 结束绘画 */</span></span><br><span class="line">	glEnd();</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画矩形，传入的是左下角XY坐标和右上角XY坐标</span></span><br><span class="line"><span class="built_in">void</span> glRect(<span class="built_in">int</span> leftX,<span class="built_in">int</span> leftY,<span class="built_in">int</span> rightX,<span class="built_in">int</span> rightY)&#123;</span><br><span class="line">	<span class="comment">//画封闭曲线</span></span><br><span class="line">    glBegin(GL_LINE_LOOP);</span><br><span class="line">	<span class="comment">//左下角</span></span><br><span class="line">	glVertex2d(leftX,leftY);</span><br><span class="line">	<span class="comment">//右下角</span></span><br><span class="line">	glVertex2d(rightX,leftY);</span><br><span class="line">	<span class="comment">//右上角</span></span><br><span class="line">	glVertex2d(rightX,rightY);</span><br><span class="line">	<span class="comment">//左上角</span></span><br><span class="line">	glVertex2d(leftX,rightY);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画圆角矩形，传入矩形宽高，角半径，矩形中心点坐标</span></span><br><span class="line"><span class="built_in">void</span> glRoundRec(<span class="built_in">int</span> centerX,<span class="built_in">int</span> centerY,<span class="built_in">int</span> width,<span class="built_in">int</span> height,<span class="built_in">float</span> cirR)&#123;</span><br><span class="line">	<span class="comment">//二分之PI，一个象限的角度</span></span><br><span class="line">	<span class="built_in">float</span> PI_HALF = PI/<span class="number">2</span>;</span><br><span class="line">	<span class="comment">//划分程度,值越大画得越精细</span></span><br><span class="line">	<span class="built_in">float</span> divide=<span class="number">20.0</span>;</span><br><span class="line">	<span class="comment">//圆角矩形的坐标</span></span><br><span class="line">    <span class="built_in">float</span> tx,ty; </span><br><span class="line">	<span class="comment">//画封闭曲线</span></span><br><span class="line">    glBegin(GL_LINE_LOOP);</span><br><span class="line">	<span class="comment">//四个象限不同的操作符</span></span><br><span class="line">    <span class="built_in">int</span> opX[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>,<span class="number">1</span>&#125;;</span><br><span class="line">    <span class="built_in">int</span> opY[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>&#125;;</span><br><span class="line">	<span class="comment">//用来计数，从第一象限到第四象限</span></span><br><span class="line">    <span class="built_in">float</span> x=<span class="number">0</span>;</span><br><span class="line">	<span class="comment">//x自增时加的值</span></span><br><span class="line">	<span class="built_in">float</span> part=<span class="number">1</span>/divide;</span><br><span class="line">	<span class="comment">//计算内矩形宽高一半的数值</span></span><br><span class="line">	<span class="built_in">int</span> w=width/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="built_in">int</span> h=height/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="comment">//循环画线</span></span><br><span class="line">    <span class="keyword">for</span>(x=<span class="number">0</span>;x&lt;<span class="number">4</span>;x+=part)&#123;</span><br><span class="line">		<span class="comment">//求出弧度</span></span><br><span class="line">		<span class="built_in">float</span> rad = PI_HALF*x;</span><br><span class="line">		<span class="comment">//计算坐标值</span></span><br><span class="line">	    tx=cirR*cos(rad)+opX[(<span class="built_in">int</span>)x]*w+centerX;</span><br><span class="line">	    ty=cirR*sin(rad)+opY[(<span class="built_in">int</span>)x]*h+centerY;</span><br><span class="line">		<span class="comment">//传入坐标画线</span></span><br><span class="line">	    glVertex2f(tx,ty);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">   glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画弧线，相对偏移量XY，开始的弧度，结束的弧度，半径</span></span><br><span class="line"><span class="built_in">void</span> glArc(<span class="built_in">double</span> x,<span class="built_in">double</span> y,<span class="built_in">double</span> start_angle,<span class="built_in">double</span> end_angle,<span class="built_in">double</span> radius)</span><br><span class="line">&#123;   </span><br><span class="line">	<span class="comment">//开始绘制曲线</span></span><br><span class="line">	glBegin(GL_LINE_STRIP);</span><br><span class="line">	<span class="comment">//每次画增加的弧度</span></span><br><span class="line">	<span class="built_in">double</span> delta_angle=PI/<span class="number">180</span>;</span><br><span class="line">	<span class="comment">//画圆弧</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="built_in">double</span> i=start_angle;i&lt;=end_angle;i+=delta_angle)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//绝对定位加三角函数值</span></span><br><span class="line">		<span class="built_in">double</span> vx=x+radius * cos(i);</span><br><span class="line">		<span class="built_in">double</span> vy=y+radius*sin(i);</span><br><span class="line">		glVertex2d(vx,vy);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束绘画</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//画圆</span></span><br><span class="line"><span class="built_in">void</span> glCircle(<span class="built_in">double</span> x, <span class="built_in">double</span> y, <span class="built_in">double</span> radius)  </span><br><span class="line">&#123;  </span><br><span class="line">	<span class="comment">//画全圆</span></span><br><span class="line">    glArc(x,y,<span class="number">0</span>,<span class="number">2</span>*PI,radius);  </span><br><span class="line">&#125;  </span><br><span class="line"></span><br><span class="line"><span class="comment">//画三角形，传入三个点的坐标</span></span><br><span class="line"><span class="built_in">void</span> glTri(<span class="built_in">int</span> x1,<span class="built_in">int</span> y1,<span class="built_in">int</span> x2,<span class="built_in">int</span> y2,<span class="built_in">int</span> x3,<span class="built_in">int</span> y3)&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    glBegin(GL_LINE_LOOP);</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	glVertex2d(x1,y1);</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	glVertex2d(x2,y2);</span><br><span class="line">	<span class="comment">//三点</span></span><br><span class="line">	glVertex2d(x3,y3);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画线，传入两点坐标</span></span><br><span class="line"><span class="built_in">void</span> glLine(<span class="built_in">int</span> x1,<span class="built_in">int</span> y1,<span class="built_in">int</span> x2,<span class="built_in">int</span> y2)&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    glBegin(GL_LINE_STRIP);</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	glVertex2d(x1,y1);</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	glVertex2d(x2,y2);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//函数用来画图</span></span><br><span class="line"><span class="built_in">void</span> display(<span class="built_in">void</span>)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">//GL_COLOR_BUFFER_BIT表示清除颜色</span></span><br><span class="line">	glClear(GL_COLOR_BUFFER_BIT);</span><br><span class="line">	<span class="comment">//设置画线颜色</span></span><br><span class="line">    glColor3f(<span class="number">0.5</span>,<span class="number">0.5</span>,<span class="number">0.5</span>);</span><br><span class="line">	<span class="comment">//画点大小</span></span><br><span class="line">	glPointSize(<span class="number">2</span>);</span><br><span class="line">	<span class="comment">//画圆角矩形，大肚子</span></span><br><span class="line">	glRoundRec(<span class="number">0</span>,<span class="number">0</span>,<span class="number">146</span>,<span class="number">120</span>,<span class="number">15</span>);</span><br><span class="line">	<span class="comment">//画圆，中间小圈</span></span><br><span class="line">	glCircle(<span class="number">0</span>,<span class="number">0</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//画矩形，脖子</span></span><br><span class="line">	glRect(<span class="number">-25</span>,<span class="number">60</span>,<span class="number">25</span>,<span class="number">76</span>);</span><br><span class="line">	<span class="comment">//画圆角矩形，大脸</span></span><br><span class="line">	glRoundRec(<span class="number">0</span>,<span class="number">113</span>,<span class="number">128</span>,<span class="number">74</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//两个眼睛</span></span><br><span class="line">	glCircle(<span class="number">-30</span>,<span class="number">111</span>,<span class="number">10</span>);</span><br><span class="line">	glCircle(<span class="number">30</span>,<span class="number">111</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//两条天线</span></span><br><span class="line">	glLine(<span class="number">-35</span>,<span class="number">150</span>,<span class="number">-35</span>,<span class="number">173</span>);</span><br><span class="line">	glLine(<span class="number">35</span>,<span class="number">150</span>,<span class="number">35</span>,<span class="number">173</span>);</span><br><span class="line">	<span class="comment">//圆角矩形，两个耳朵</span></span><br><span class="line">	glRoundRec(<span class="number">81</span>,<span class="number">115</span>,<span class="number">20</span>,<span class="number">34</span>,<span class="number">5</span>);</span><br><span class="line">	glRoundRec(<span class="number">-81</span>,<span class="number">115</span>,<span class="number">20</span>,<span class="number">34</span>,<span class="number">5</span>);</span><br><span class="line">	<span class="comment">//圆弧，画嘴</span></span><br><span class="line">	glArc(<span class="number">0</span>,<span class="number">133</span>,<span class="number">11</span>*PI/<span class="number">8</span>,<span class="number">13</span>*PI/<span class="number">8</span>,<span class="number">45</span>);</span><br><span class="line">	<span class="comment">//画三角，肚子里的三角</span></span><br><span class="line">	glTri(<span class="number">-30</span>,<span class="number">-15</span>,<span class="number">30</span>,<span class="number">-15</span>,<span class="number">0</span>,<span class="number">28</span>);</span><br><span class="line">	<span class="comment">//画矩形，胳膊连接处</span></span><br><span class="line">	glRect(<span class="number">-81</span>,<span class="number">43</span>,<span class="number">-73</span>,<span class="number">25</span>);</span><br><span class="line">	glRect(<span class="number">81</span>,<span class="number">43</span>,<span class="number">73</span>,<span class="number">25</span>);</span><br><span class="line">	<span class="comment">//画矩形，上臂</span></span><br><span class="line">	glRect(<span class="number">-108</span>,<span class="number">45</span>,<span class="number">-81</span>,<span class="number">0</span>);</span><br><span class="line">	glRect(<span class="number">108</span>,<span class="number">45</span>,<span class="number">81</span>,<span class="number">0</span>);</span><br><span class="line">	<span class="comment">//画矩形，中臂</span></span><br><span class="line">	glRect(<span class="number">-101</span>,<span class="number">0</span>,<span class="number">-88</span>,<span class="number">-4</span>);</span><br><span class="line">	glRect(<span class="number">101</span>,<span class="number">0</span>,<span class="number">88</span>,<span class="number">-4</span>);</span><br><span class="line">	<span class="comment">//画矩形，下臂</span></span><br><span class="line">	glRect(<span class="number">-108</span>,<span class="number">-4</span>,<span class="number">-81</span>,<span class="number">-37</span>);</span><br><span class="line">	glRect(<span class="number">108</span>,<span class="number">-4</span>,<span class="number">81</span>,<span class="number">-37</span>);</span><br><span class="line">	<span class="comment">//画圆形，手掌</span></span><br><span class="line">	glCircle(<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">10</span>);</span><br><span class="line">	glCircle(<span class="number">95</span>,<span class="number">-47</span>,<span class="number">10</span>);</span><br><span class="line"></span><br><span class="line">	<span class="comment">/* 绘制取色盘 */</span></span><br><span class="line">	glColorCircle(<span class="number">-280</span>, <span class="number">280</span>, <span class="number">10</span>, red);</span><br><span class="line">	glColorCircle(<span class="number">-250</span>, <span class="number">280</span>, <span class="number">10</span>, yellow);</span><br><span class="line">	glColorCircle(<span class="number">-220</span>, <span class="number">280</span>, <span class="number">10</span>, grey);</span><br><span class="line">	glColorCircle(<span class="number">-180</span>, <span class="number">280</span>, <span class="number">10</span>, nowColor);</span><br><span class="line">	glColorCircle(<span class="number">250</span>, <span class="number">280</span>, <span class="number">10</span>, startBtn);</span><br><span class="line">	glColorCircle(<span class="number">280</span>, <span class="number">280</span>, <span class="number">10</span>, endBtn);</span><br><span class="line">	<span class="comment">//保证前面的OpenGL命令立即执行，而不是让它们在缓冲区中等待 </span></span><br><span class="line">	<span class="comment">/* 绘制多边形 */</span></span><br><span class="line">	glPolygons();</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//窗口大小变化时调用的函数</span></span><br><span class="line"><span class="built_in">void</span> ChangeSize(GLsizei w,GLsizei h)  </span><br><span class="line">&#123;  </span><br><span class="line">	<span class="comment">//避免高度为0</span></span><br><span class="line">    <span class="keyword">if</span>(h==<span class="number">0</span>) &#123;  </span><br><span class="line">        h=<span class="number">1</span>;  </span><br><span class="line">    &#125;  </span><br><span class="line">    <span class="comment">//定义视口大小，宽高一致  </span></span><br><span class="line">    glViewport(<span class="number">0</span>,<span class="number">0</span>,w,h);</span><br><span class="line">	<span class="built_in">int</span> half = <span class="number">300</span>;</span><br><span class="line">	<span class="comment">/* 定义宽高的一半 */</span></span><br><span class="line">	halfHeight	= <span class="number">300</span>;</span><br><span class="line">	halfWidth	= <span class="number">300</span>;</span><br><span class="line">	<span class="comment">//重置坐标系统，使投影变换复位</span></span><br><span class="line">    glMatrixMode(GL_PROJECTION); </span><br><span class="line">	<span class="comment">//将当前的用户坐标系的原点移到了屏幕中心</span></span><br><span class="line">    glLoadIdentity();  </span><br><span class="line">   <span class="comment">//定义正交视域体  </span></span><br><span class="line">    <span class="keyword">if</span>(w&lt;h) &#123;</span><br><span class="line">		<span class="comment">//如果高度大于宽度，则将高度视角扩大，图形显示居中</span></span><br><span class="line">        glOrtho(-half,half,-half*h/w,half*h/w,-half,half);  </span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="comment">//如果宽度大于高度，则将宽度视角扩大，图形显示居中</span></span><br><span class="line">        glOrtho(-half*w/h,half*w/h,-half,half,-half,half);  </span><br><span class="line">    &#125;  </span><br><span class="line">  </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 判断两个颜色是否相等 */</span></span><br><span class="line"><span class="built_in">bool</span> sameColor(GLubyte color1[<span class="number">3</span>], GLubyte color2[<span class="number">3</span>])</span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">if</span> (color1[<span class="number">0</span>] - color2[<span class="number">0</span>] &lt; <span class="number">5</span> &amp;&amp; color1[<span class="number">1</span>] - color2[<span class="number">1</span>] &lt; <span class="number">5</span> &amp;&amp; color1[<span class="number">2</span>] - color2[<span class="number">1</span>] &lt; <span class="number">5</span>)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="keyword">return</span>(<span class="literal">true</span>);</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="keyword">return</span>(<span class="literal">false</span>);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 画点 */</span></span><br><span class="line"><span class="built_in">void</span> glPoints(<span class="built_in">int</span> x, <span class="built_in">int</span> y) &#123;</span><br><span class="line">	glBegin(GL_POINTS);</span><br><span class="line">	<span class="comment">/* 点直接设置为黑色 */</span></span><br><span class="line">	glColor3ub(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">	glVertex2d(x - halfWidth, halfHeight - y);</span><br><span class="line">	glEnd();</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line"><span class="built_in">void</span> mouseClick(<span class="built_in">int</span> btn, <span class="built_in">int</span> state, <span class="built_in">int</span> x, <span class="built_in">int</span> y)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 选项卡的分界范围 */</span></span><br><span class="line">	<span class="built_in">int</span> optionHeight = <span class="number">40</span>;</span><br><span class="line">	<span class="built_in">int</span> optionWidth = <span class="number">250</span>;</span><br><span class="line">	<span class="keyword">if</span> (btn == GLUT_LEFT_BUTTON &amp;&amp; state == GLUT_DOWN)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">/* 如果在颜色选项卡中点击 */</span></span><br><span class="line">		<span class="keyword">if</span> (y &lt; optionHeight &amp;&amp; x &lt; optionWidth)</span><br><span class="line">		&#123;</span><br><span class="line">			glReadPixels(x, <span class="number">2</span> * halfHeight - y, <span class="number">1</span>, <span class="number">1</span>, GL_RGB, GL_UNSIGNED_BYTE, &amp;nowColor);</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, nowColor[<span class="number">0</span>], nowColor[<span class="number">1</span>], nowColor[<span class="number">2</span>]);</span><br><span class="line">			<span class="comment">/* 设置绘图颜色并显示当前取色板颜色 */</span></span><br><span class="line">			glColorCircle(<span class="number">-180</span>, <span class="number">280</span>, <span class="number">10</span>, nowColor);</span><br><span class="line">		<span class="comment">/* 如果点击的是右侧选项按钮 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span> (y &lt; optionHeight &amp;&amp; x &gt; optionWidth) &#123;</span><br><span class="line">			<span class="comment">//取当前的点</span></span><br><span class="line">			GLubyte color[<span class="number">3</span>];</span><br><span class="line">			glReadPixels(x, <span class="number">2</span> * halfHeight - y, <span class="number">1</span>, <span class="number">1</span>, GL_RGB, GL_UNSIGNED_BYTE, &amp;color);</span><br><span class="line">			printf(<span class="string">"r:%d,g:%d,b:%d\n"</span>, color[<span class="number">0</span>], color[<span class="number">1</span>], color[<span class="number">2</span>]);</span><br><span class="line">			<span class="comment">/* 如果点击了开始绘制的按钮 */</span></span><br><span class="line">			<span class="keyword">if</span> (sameColor(color, startBtn)) &#123;</span><br><span class="line">				drawStatus = <span class="number">0</span>;</span><br><span class="line">				<span class="comment">/* 开始画一个图形，顶点个数置零 */</span></span><br><span class="line">				polygons[con].verNum = <span class="number">0</span>;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			<span class="comment">/* 如果点击了结束绘制的按钮 */</span></span><br><span class="line">			&#125; <span class="keyword">else</span> <span class="keyword">if</span> (sameColor(color, endBtn)) &#123;</span><br><span class="line">				glutPostRedisplay();</span><br><span class="line">				<span class="comment">/* 画的图形个数加一 */</span></span><br><span class="line">				con++;</span><br><span class="line">				printf(<span class="string">"drawStatus:%d\n"</span>, drawStatus);</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="comment">/* 如果点击的是下方的绘图页面 */</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="comment">/* 如果当前是正在取点状态 */</span></span><br><span class="line">			<span class="keyword">if</span> (drawStatus == <span class="number">0</span>)</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="comment">/* 保存每个点，然后该图形顶点个数加一 */</span></span><br><span class="line">				polygons[con].x[polygons[con].verNum]	= x;</span><br><span class="line">				polygons[con].y[polygons[con].verNum]	= y;</span><br><span class="line">				<span class="comment">/* 画点 */</span></span><br><span class="line">				glPoints(x, y);</span><br><span class="line">				<span class="comment">/* 设置当前颜色RGB，如果取色有变动，以最后的取色为准 */</span> </span><br><span class="line">				polygons[con].color[<span class="number">0</span>] = nowColor[<span class="number">0</span>];</span><br><span class="line">				polygons[con].color[<span class="number">1</span>] = nowColor[<span class="number">1</span>];</span><br><span class="line">				polygons[con].color[<span class="number">2</span>] = nowColor[<span class="number">2</span>];</span><br><span class="line">				printf(<span class="string">"polyColor%d%d%d\n"</span>, polygons[con].color[<span class="number">0</span>],polygons[con].color[<span class="number">1</span>],polygons[con].color[<span class="number">2</span>]);</span><br><span class="line">				polygons[con].verNum++;</span><br><span class="line">				printf(<span class="string">"con:%d,verNum:%d\n"</span>, con, polygons[con].verNum);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//程序入口</span></span><br><span class="line"><span class="built_in">int</span> main(<span class="built_in">int</span> argc, char *argv[])&#123;</span><br><span class="line">	<span class="comment">//对GLUT进行初始化，并处理所有的命令行参数</span></span><br><span class="line">	glutInit(&amp;argc, argv);</span><br><span class="line">	<span class="comment">//指定RGB颜色模式和单缓冲窗口</span></span><br><span class="line">	glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE);</span><br><span class="line">	<span class="comment">//定义窗口的位置</span></span><br><span class="line">	glutInitWindowPosition(<span class="number">100</span>, <span class="number">100</span>);</span><br><span class="line">	<span class="comment">//定义窗口的大小</span></span><br><span class="line">	glutInitWindowSize(<span class="number">600</span>, <span class="number">600</span>);</span><br><span class="line">	<span class="comment">//创建窗口，同时为之命名</span></span><br><span class="line">	glutCreateWindow(<span class="string">"OpenGL"</span>);</span><br><span class="line">	<span class="comment">//设置窗口清除颜色为白色</span></span><br><span class="line">	glClearColor(<span class="number">1.0f</span>,<span class="number">1.0f</span>,<span class="number">1.0f</span>,<span class="number">1.0f</span>);</span><br><span class="line">	<span class="comment">//参数为一个函数，绘图时这个函数就会被调用</span></span><br><span class="line">	glutDisplayFunc(&amp;display);</span><br><span class="line">	<span class="comment">//参数为一个函数，当窗口大小改变时会被调用</span></span><br><span class="line">	glutReshapeFunc(ChangeSize); </span><br><span class="line">	<span class="comment">/*鼠标点击事件，鼠标点击或者松开时调用 */</span></span><br><span class="line">	glutMouseFunc(mouseClick);</span><br><span class="line">	<span class="comment">//该函数让GLUT框架开始运行，所有设置的回调函数开始工作，直到用户终止程序为止</span></span><br><span class="line">	glutMainLoop();</span><br><span class="line">	<span class="comment">//程序返回</span></span><br><span class="line">	<span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>小伙伴们可以运行试试看。</p>
                  <h2 id="综述-1"><a href="#综述-1" class="headerlink" title="综述"></a>综述</h2>
                  <p>本节我们主要利用了鼠标时间来实现了取色，设置颜色，并成功通过取点绘制出了各种形状的多边形。</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-05-11 01:38:19" itemprop="dateCreated datePublished" datetime="2015-05-11T01:38:19+08:00">2015-05-11</time>
                </span>
                <span id="/1783.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例七之鼠标设色取点绘图" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>21k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>19 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1776.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1776.html" class="post-title-link" itemprop="url">OpenGL绘图实例六之鼠标监听事件</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>在前面的例子中我们绘制了2D机器人以及颜色的填充，另外还有平移放缩变换等等。不过这些绘图方式都有一个特点，那就是无法动态地响应事件，如果我们在例子中加入鼠标点击的响应时间，让图形根据鼠标点击的变化而变化，那将会是非常友好的。 那么这一篇我们就来看一下鼠标响应的实现。</p>
                  <h2 id="鼠标点击"><a href="#鼠标点击" class="headerlink" title="鼠标点击"></a>鼠标点击</h2>
                  <p>对于鼠标点击，无非是左右键，滚轮的点击以及区分按下还是按上。 监听方法如下： <strong>void mouseClick(int btn, int state, int x, int y)</strong> 方法名是任意的，参数有四个，分别是左右键，点击状态（按下还是松开），点击的x，y坐标。 那么我们在main函数中怎么调用，代码如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* 鼠标点击事件，鼠标点击或者松开时调用 */</span></span><br><span class="line">glut<span class="constructor">MouseFunc(<span class="params">mouseClick</span>)</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们利用了类库中提供的方法 <strong>glutMouseFunc()</strong> 这个方法用来监听鼠标事件，我们传入刚才定义的mouseClick函数，即可完成调用，同时mouseClick函数的参数都会被赋值。 通过上面的代码，在鼠标点击窗口内部时，会自动调用mouseClick方法，而且四个参数都会有赋值。可以直接使用这些值来操作。</p>
                  <h2 id="鼠标移动"><a href="#鼠标移动" class="headerlink" title="鼠标移动"></a>鼠标移动</h2>
                  <p><strong>void mouseMove(int x, int y)</strong> 方法名我们也可以任意指定，参数有2个，分别是x，y 在main函数中可以这样调用</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/*鼠标移动事件，鼠标按下并移动时调用 */</span></span><br><span class="line">glut<span class="constructor">MotionFunc(<span class="params">mouseMove</span>)</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们利用了类库中提供的方法 <strong>glutMotionFunc()</strong> 同上面的原理，传入了mouseMove方法，在鼠标移动时，就可以对mouseMove方法的参数进行赋值。</p>
                  <h2 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h2>
                  <p>好了，上面我们说了两个鼠标事件的方法，下面我们用一个例子来感受一下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">#<span class="keyword">include</span> &lt;glut.h&gt;</span><br><span class="line">#<span class="keyword">include</span> &lt;math.h&gt;</span><br><span class="line">#<span class="keyword">include</span> &lt;stdio.h&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 函数用来画图 */</span></span><br><span class="line">void display(void)</span><br><span class="line">&#123;</span><br><span class="line">	</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*鼠标点击事件 */</span></span><br><span class="line">void mouse<span class="constructor">Click(<span class="params">int</span> <span class="params">btn</span>, <span class="params">int</span> <span class="params">state</span>, <span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	printf(<span class="string">"点击了鼠标，btn:%d,state:%d,x:%d,y:%d\n"</span>, btn, state, x, y);</span><br><span class="line">	<span class="keyword">if</span>(btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN)&#123;</span><br><span class="line">		printf(<span class="string">"按下了左边按钮\n"</span>);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(btn<span class="operator"> == </span>GLUT_LEFT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_UP)&#123;</span><br><span class="line">		printf(<span class="string">"松开了左边按钮\n"</span>);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(btn<span class="operator"> == </span>GLUT_RIGHT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_DOWN)&#123;</span><br><span class="line">		printf(<span class="string">"按下了右边按钮\n"</span>);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(btn<span class="operator"> == </span>GLUT_RIGHT_BUTTON<span class="operator"> &amp;&amp; </span>state<span class="operator"> == </span>GLUT_UP)&#123;</span><br><span class="line">		printf(<span class="string">"松开了右边按钮\n"</span>);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 鼠标移动事件 */</span></span><br><span class="line">void mouse<span class="constructor">Move(<span class="params">int</span> <span class="params">x</span>, <span class="params">int</span> <span class="params">y</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">	printf(<span class="string">"移动鼠标中，x:%d,y%d\n"</span>, x, y);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 程序入口 */</span></span><br><span class="line"><span class="built_in">int</span> main(<span class="built_in">int</span> argc, <span class="built_in">char</span> *argv<span class="literal">[]</span>)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">/* 对GLUT进行初始化，并处理所有的命令行参数 */</span></span><br><span class="line">	glut<span class="constructor">Init(&amp;<span class="params">argc</span>, <span class="params">argv</span>)</span>;</span><br><span class="line">	<span class="comment">/* 指定RGB颜色模式和单缓冲窗口 */</span></span><br><span class="line">	glut<span class="constructor">InitDisplayMode(GLUT_RGB | GLUT_SINGLE)</span>;</span><br><span class="line">	<span class="comment">/* 定义窗口的位置 */</span></span><br><span class="line">	glut<span class="constructor">InitWindowPosition(100, 100)</span>;</span><br><span class="line">	<span class="comment">/* 定义窗口的大小 */</span></span><br><span class="line">	glut<span class="constructor">InitWindowSize(400, 400)</span>;</span><br><span class="line">	<span class="comment">/* 创建窗口，同时为之命名 */</span></span><br><span class="line">	glut<span class="constructor">CreateWindow(<span class="string">"OpenGL"</span>)</span>;</span><br><span class="line">	<span class="comment">/* 设置窗口清除颜色为白色 */</span></span><br><span class="line">	gl<span class="constructor">ClearColor(1.0f, 1.0f, 1.0f, 1.0f)</span>;</span><br><span class="line">	<span class="comment">/* 参数为一个函数，绘图时这个函数就会被调用 */</span></span><br><span class="line">	glut<span class="constructor">DisplayFunc(&amp;<span class="params">display</span>)</span>;</span><br><span class="line">	<span class="comment">/*鼠标点击事件，鼠标点击或者松开时调用 */</span></span><br><span class="line">	glut<span class="constructor">MouseFunc(<span class="params">mouseClick</span>)</span>;</span><br><span class="line">	<span class="comment">/*鼠标移动事件，鼠标按下并移动时调用 */</span></span><br><span class="line">	glut<span class="constructor">MotionFunc(<span class="params">mouseMove</span>)</span>;</span><br><span class="line">	<span class="comment">/* 该函数让GLUT框架开始运行，所有设置的回调函数开始工作，直到用户终止程序为止 */</span></span><br><span class="line">	glut<span class="constructor">MainLoop()</span>;</span><br><span class="line">	<span class="comment">/*程序返回 */</span></span><br><span class="line">	return(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在上面的代码中，我们监听了鼠标点击和鼠标移动事件，并打印输出了鼠标点击事件的响应。 比如我先点击了鼠标左键，然后点击了鼠标右键。然后移动了鼠标左键，然后移动了鼠标右键。运行结果如下 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/0150511000009.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/0150511000009.jpg" alt="0150511000009"></a> 可以发现它打印输出了鼠标的按钮代号，点击状态，点击的位置。 另外我们发现鼠标点击的坐标原点是左上角，这跟我们之前读取色值的坐标原点（左下角）不一样，也跟我们绘图的坐标原点（中心点）不一样。编程时一定要注意。 获取到了点击点的位置，我们就可以利用这些值来进行相应的作图处理了。 小伙伴们可以尝试一下。</p>
                  <h2 id="综述-1"><a href="#综述-1" class="headerlink" title="综述"></a>综述</h2>
                  <p>本节说的不多，主要是说明了鼠标监听事件的用法。glutMouseFunc以及glutMotionFunc，另外通过一个实例来演示了鼠标监听事件的用法，下一篇我们就利用这个知识来进行一个实例演示。大家加油！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-05-11 00:04:11" itemprop="dateCreated datePublished" datetime="2015-05-11T00:04:11+08:00">2015-05-11</time>
                </span>
                <span id="/1776.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例六之鼠标监听事件" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>2.4k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>2 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1760.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> HTML <i class="label-arrow"></i>
                  </a>
                  <a href="/1760.html" class="post-title-link" itemprop="url">LESS学习记录</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。 本文部分内容参考 <a href="http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/" target="_blank" rel="noopener">官方文档</a></p>
                  <h2 id="编译器"><a href="#编译器" class="headerlink" title="编译器"></a>编译器</h2>
                  <p>建议使用Koala编译器 <a href="http://koala-app.com/index-zh.html" target="_blank" rel="noopener">下载地址</a></p>
                  <h2 id="LESS-原理及使用方式"><a href="#LESS-原理及使用方式" class="headerlink" title="LESS 原理及使用方式"></a>LESS 原理及使用方式</h2>
                  <p>本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：</p>
                  <h5 id="清单-1-LESS-文件"><a href="#清单-1-LESS-文件" class="headerlink" title="清单 1. LESS 文件"></a>清单 1. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="variable">@color:</span> <span class="number">#4D926F</span>; </span><br><span class="line"></span><br><span class="line"><span class="selector-id">#header</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="variable">@color</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-tag">h2</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="variable">@color</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-2-CSS-文件"><a href="#清单-2-CSS-文件" class="headerlink" title="清单 2. CSS 文件"></a>清单 2. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#header</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#4D926F</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-tag">h2</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#4D926F</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>从上面的例子可以看出，学习 LESS 非常容易，只要你了解 CSS 基础就可以很容易上手。 LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。</p>
                  <h3 id="客户端"><a href="#客户端" class="headerlink" title="客户端"></a>客户端</h3>
                  <p>我们可以直接在客户端使用 .less（LESS 源文件），只需要从 <a href="http://lesscss.org/" target="_blank" rel="noopener">LESSCSS</a> 下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：</p>
                  <figure class="highlight routeros">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">&lt;link <span class="attribute">rel</span>=<span class="string">"stylesheet/less"</span> <span class="attribute">type</span>=<span class="string">"text/css"</span> <span class="attribute">href</span>=<span class="string">"styles.less"</span>&gt;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>LESS 源文件的引入方式与标准 CSS 文件引入方式一样：</p>
                  <figure class="highlight routeros">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">&lt;link <span class="attribute">rel</span>=<span class="string">"stylesheet/less"</span> <span class="attribute">type</span>=<span class="string">"text/css"</span> <span class="attribute">href</span>=<span class="string">"styles.less"</span>&gt;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。</p>
                  <h3 id="使用编译生成的静态-CSS-文件"><a href="#使用编译生成的静态-CSS-文件" class="headerlink" title="使用编译生成的静态 CSS 文件"></a>使用编译生成的静态 CSS 文件</h3>
                  <p>我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。</p>
                  <h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2>
                  <h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3>
                  <p>LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。 我们可以从下面的代码了解变量的使用及作用：</p>
                  <h5 id="清单-3-LESS-文件"><a href="#清单-3-LESS-文件" class="headerlink" title="清单 3. LESS 文件"></a>清单 3. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="variable">@border-color :</span> <span class="number">#b5bcc7</span>; </span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mythemes</span> <span class="selector-tag">tableBorder</span>&#123; </span><br><span class="line">  <span class="attribute">border </span>: <span class="number">1px</span> solid <span class="variable">@border-color</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-4-CSS-文件"><a href="#清单-4-CSS-文件" class="headerlink" title="清单 4. CSS 文件"></a>清单 4. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.mythemes</span> <span class="selector-tag">tableBorder</span> &#123; </span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#b5bcc7</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。 该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。 LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。</p>
                  <h5 id="清单-5-LESS-文件"><a href="#清单-5-LESS-文件" class="headerlink" title="清单 5. LESS 文件"></a>清单 5. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="variable">@width :</span> <span class="number">20px</span>; </span><br><span class="line"><span class="selector-id">#homeDiv</span> &#123; </span><br><span class="line">  <span class="variable">@width :</span> <span class="number">30px</span>; </span><br><span class="line">  <span class="selector-id">#centerDiv</span>&#123; </span><br><span class="line">      <span class="attribute">width </span>: <span class="variable">@width</span>;<span class="comment">// 此处应该取最近定义的变量 width 的值 30px </span></span><br><span class="line">             &#125; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#leftDiv</span> &#123; </span><br><span class="line">    <span class="attribute">width </span>: <span class="variable">@width</span>; <span class="comment">// 此处应该取最上面定义的变量 width 的值 20px </span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-6-CSS-文件"><a href="#清单-6-CSS-文件" class="headerlink" title="清单 6. CSS 文件"></a>清单 6. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#homeDiv</span> <span class="selector-id">#centerDiv</span> &#123; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30px</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#leftDiv</span> &#123; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">20px</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <h3 id="Mixins（混入）"><a href="#Mixins（混入）" class="headerlink" title="Mixins（混入）"></a>Mixins（混入）</h3>
                  <p>Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。 我们先简单看一下 Mixins 在 LESS 中的使用：</p>
                  <h5 id="清单-7-LESS-文件"><a href="#清单-7-LESS-文件" class="headerlink" title="清单 7. LESS 文件"></a>清单 7. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">// 定义一个样式选择器</span></span><br><span class="line"> <span class="selector-class">.roundedCorners</span>(<span class="variable">@radius</span>:<span class="number">5px</span>) &#123; </span><br><span class="line"> <span class="attribute">-moz-border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> <span class="attribute">-webkit-border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> &#125; </span><br><span class="line"> <span class="comment">// 在另外的样式选择器中使用</span></span><br><span class="line"> <span class="selector-id">#header</span> &#123; </span><br><span class="line"> <span class="selector-class">.roundedCorners</span>; </span><br><span class="line"> &#125; </span><br><span class="line"> <span class="selector-id">#footer</span> &#123; </span><br><span class="line"> <span class="selector-class">.roundedCorners</span>(<span class="number">10px</span>); </span><br><span class="line"> &#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-8-CSS-文件"><a href="#清单-8-CSS-文件" class="headerlink" title="清单 8. CSS 文件"></a>清单 8. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#header</span> &#123; </span><br><span class="line"><span class="attribute">-moz-border-radius</span>:<span class="number">5px</span>; </span><br><span class="line"><span class="attribute">-webkit-border-radius</span>:<span class="number">5px</span>; </span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">5px</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#footer</span> &#123; </span><br><span class="line"><span class="attribute">-moz-border-radius</span>:<span class="number">10px</span>; </span><br><span class="line"><span class="attribute">-webkit-border-radius</span>:<span class="number">10px</span>; </span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">10px</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。 Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：</p>
                  <h5 id="清单-9-LESS-文件"><a href="#清单-9-LESS-文件" class="headerlink" title="清单 9. LESS 文件"></a>清单 9. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">// 定义一个样式选择器</span></span><br><span class="line"> <span class="selector-class">.borderRadius</span>(<span class="variable">@radius</span>)&#123; </span><br><span class="line"> <span class="attribute">-moz-border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> <span class="attribute">-webkit-border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> &#125; </span><br><span class="line"> <span class="comment">// 使用已定义的样式选择器</span></span><br><span class="line"> <span class="selector-id">#header</span> &#123; </span><br><span class="line"> <span class="selector-class">.borderRadius</span>(<span class="number">10px</span>); <span class="comment">// 把 10px 作为参数传递给样式选择器</span></span><br><span class="line"> &#125; </span><br><span class="line"> <span class="selector-class">.btn</span> &#123; </span><br><span class="line"> <span class="selector-class">.borderRadius</span>(<span class="number">3px</span>);<span class="comment">// // 把 3px 作为参数传递给样式选择器</span></span><br><span class="line"></span><br><span class="line"> &#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-10-CSS-文件"><a href="#清单-10-CSS-文件" class="headerlink" title="清单 10. CSS 文件"></a>清单 10. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#header</span> &#123; </span><br><span class="line"><span class="attribute">-moz-border-radius</span>: <span class="number">10px</span>; </span><br><span class="line"><span class="attribute">-webkit-border-radius</span>: <span class="number">10px</span>; </span><br><span class="line"><span class="attribute">border-radius</span>: <span class="number">10px</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-class">.btn</span> &#123; </span><br><span class="line"><span class="attribute">-moz-border-radius</span>: <span class="number">3px</span>; </span><br><span class="line"><span class="attribute">-webkit-border-radius</span>: <span class="number">3px</span>; </span><br><span class="line"><span class="attribute">border-radius</span>: <span class="number">3px</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们还可以给 Mixins 的参数定义一人默认值，如</p>
                  <h5 id="清单-11-LESS-文件"><a href="#清单-11-LESS-文件" class="headerlink" title="清单 11. LESS 文件"></a>清单 11. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.borderRadius</span>(<span class="variable">@radius</span>:<span class="number">5px</span>)&#123; </span><br><span class="line"> <span class="attribute">-moz-border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> <span class="attribute">-webkit-border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="variable">@radius</span>; </span><br><span class="line"> &#125; </span><br><span class="line"> <span class="selector-class">.btn</span> &#123; </span><br><span class="line"> <span class="selector-class">.borderRadius</span>; </span><br><span class="line"> &#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-12-CSS-文件"><a href="#清单-12-CSS-文件" class="headerlink" title="清单 12. CSS 文件"></a>清单 12. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.btn</span> &#123; </span><br><span class="line"><span class="attribute">-moz-border-radius</span>: <span class="number">5px</span>; </span><br><span class="line"><span class="attribute">-webkit-border-radius</span>: <span class="number">5px</span>; </span><br><span class="line"><span class="attribute">border-radius</span>: <span class="number">5px</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>像 JavaScript 中 <strong>arguments</strong>一样，Mixins 也有这样一个变量：<strong>@arguments</strong>。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。</p>
                  <h5 id="清单-13-LESS-文件"><a href="#清单-13-LESS-文件" class="headerlink" title="清单 13. LESS 文件"></a>清单 13. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.boxShadow</span>(<span class="variable">@x</span>:<span class="number">0</span>,<span class="variable">@y</span>:<span class="number">0</span>,<span class="variable">@blur</span>:<span class="number">1px</span>,<span class="variable">@color</span>:<span class="number">#000</span>)&#123; </span><br><span class="line"><span class="attribute">-moz-box-shadow</span>: <span class="variable">@arguments</span>; </span><br><span class="line"><span class="attribute">-webkit-box-shadow</span>: <span class="variable">@arguments</span>; </span><br><span class="line"><span class="attribute">box-shadow</span>: <span class="variable">@arguments</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#header</span> &#123; </span><br><span class="line"><span class="selector-class">.boxShadow</span>(<span class="number">2px</span>,<span class="number">2px</span>,<span class="number">3px</span>,<span class="number">#f36</span>); </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-14-CSS-文件"><a href="#清单-14-CSS-文件" class="headerlink" title="清单 14. CSS 文件"></a>清单 14. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#header</span> &#123; </span><br><span class="line"><span class="attribute">-moz-box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">3px</span> <span class="number">#FF36</span>; </span><br><span class="line"><span class="attribute">-webkit-box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">3px</span> <span class="number">#FF36</span>; </span><br><span class="line"><span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">3px</span> <span class="number">#FF36</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>Mixins 是 LESS 中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：</p>
                  <h5 id="清单-15-LESS-文件"><a href="#清单-15-LESS-文件" class="headerlink" title="清单 15. LESS 文件"></a>清单 15. LESS 文件</h5>
                  <figure class="highlight nimrod">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">#mynamespace &#123; </span></span><br><span class="line">.home <span class="meta">&#123;...&#125;</span> </span><br><span class="line">.user <span class="meta">&#123;...&#125;</span> </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace &gt; .user。</p>
                  <h3 id="嵌套的规则"><a href="#嵌套的规则" class="headerlink" title="嵌套的规则"></a>嵌套的规则</h3>
                  <p>在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：</p>
                  <h5 id="清单-16-HTML-片段"><a href="#清单-16-HTML-片段" class="headerlink" title="清单 16. HTML 片段"></a>清单 16. HTML 片段</h5>
                  <figure class="highlight applescript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">&lt;<span class="keyword">div</span> <span class="built_in">id</span>=<span class="string">"home"</span>&gt; </span><br><span class="line">&lt;<span class="keyword">div</span> <span class="built_in">id</span>=<span class="string">"top"</span>&gt;top&lt;/<span class="keyword">div</span>&gt; </span><br><span class="line">&lt;<span class="keyword">div</span> <span class="built_in">id</span>=<span class="string">"center"</span>&gt; </span><br><span class="line">&lt;<span class="keyword">div</span> <span class="built_in">id</span>=<span class="string">"left"</span>&gt;left&lt;/<span class="keyword">div</span>&gt; </span><br><span class="line">&lt;<span class="keyword">div</span> <span class="built_in">id</span>=<span class="string">"right"</span>&gt;right&lt;/<span class="keyword">div</span>&gt; </span><br><span class="line">&lt;/<span class="keyword">div</span>&gt; </span><br><span class="line">&lt;/<span class="keyword">div</span>&gt;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <h5 id="清单-17-LESS-文件"><a href="#清单-17-LESS-文件" class="headerlink" title="清单 17. LESS 文件"></a>清单 17. LESS 文件</h5>
                  <figure class="highlight scss">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#home</span>&#123; </span><br><span class="line">  <span class="attribute">color</span> : blue; </span><br><span class="line">  <span class="attribute">width</span> : <span class="number">600px</span>; </span><br><span class="line">  <span class="attribute">height</span> : <span class="number">500px</span>; </span><br><span class="line">  <span class="attribute">border</span>:outset; </span><br><span class="line">  <span class="selector-id">#top</span>&#123; </span><br><span class="line">       <span class="attribute">border</span>:outset; </span><br><span class="line">       <span class="attribute">width</span> : <span class="number">90%</span>; </span><br><span class="line">  &#125; </span><br><span class="line">  <span class="selector-id">#center</span>&#123; </span><br><span class="line">       <span class="attribute">border</span>:outset; </span><br><span class="line">       <span class="attribute">height</span> : <span class="number">300px</span>; </span><br><span class="line">       <span class="attribute">width</span> : <span class="number">90%</span>; </span><br><span class="line">       <span class="selector-id">#left</span>&#123; </span><br><span class="line">         <span class="attribute">border</span>:outset; </span><br><span class="line">         <span class="attribute">float</span> : left; </span><br><span class="line"> <span class="attribute">width</span> : <span class="number">40%</span>; </span><br><span class="line">       &#125; </span><br><span class="line">       <span class="selector-id">#right</span>&#123; </span><br><span class="line">         <span class="attribute">border</span>:outset; </span><br><span class="line">         <span class="attribute">float</span> : left; </span><br><span class="line"> <span class="attribute">width</span> : <span class="number">40%</span>; </span><br><span class="line">       &#125; </span><br><span class="line">   &#125; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-18-CSS-文件"><a href="#清单-18-CSS-文件" class="headerlink" title="清单 18. CSS 文件"></a>清单 18. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#home</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: blue; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">600px</span>; </span><br><span class="line"> <span class="attribute">height</span>: <span class="number">500px</span>; </span><br><span class="line"> <span class="attribute">border</span>: outset; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#home</span> <span class="selector-id">#top</span> &#123; </span><br><span class="line"> <span class="attribute">border</span>: outset; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">90%</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#home</span> <span class="selector-id">#center</span> &#123; </span><br><span class="line"> <span class="attribute">border</span>: outset; </span><br><span class="line"> <span class="attribute">height</span>: <span class="number">300px</span>; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">90%</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#home</span> <span class="selector-id">#center</span> <span class="selector-id">#left</span> &#123; </span><br><span class="line"> <span class="attribute">border</span>: outset; </span><br><span class="line"> <span class="attribute">float</span>: left; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">40%</span>; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-id">#home</span> <span class="selector-id">#center</span> <span class="selector-id">#right</span> &#123; </span><br><span class="line"> <span class="attribute">border</span>: outset; </span><br><span class="line"> <span class="attribute">float</span>: left; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">40%</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。</p>
                  <h5 id="清单-19-LESS-文件"><a href="#清单-19-LESS-文件" class="headerlink" title="清单 19. LESS 文件"></a>清单 19. LESS 文件</h5>
                  <figure class="highlight scss">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">a</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: red; </span><br><span class="line"> <span class="attribute">text-decoration</span>: none; </span><br><span class="line"> &amp;<span class="selector-pseudo">:hover</span> &#123;<span class="comment">// 有 &amp; 时解析的是同一个元素或此元素的伪类，没有 &amp; 解析是后代元素</span></span><br><span class="line">  <span class="attribute">color</span>: black; </span><br><span class="line">  <span class="attribute">text-decoration</span>: underline; </span><br><span class="line"> &#125; </span><br><span class="line"> &#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-20-CSS-文件"><a href="#清单-20-CSS-文件" class="headerlink" title="清单 20. CSS 文件"></a>清单 20. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">a</span> &#123; </span><br><span class="line"><span class="attribute">color</span>: red; </span><br><span class="line"><span class="attribute">text-decoration</span>: none; </span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123; </span><br><span class="line"><span class="attribute">color</span>: black; </span><br><span class="line"><span class="attribute">text-decoration</span>: underline; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <h3 id="运算及函数"><a href="#运算及函数" class="headerlink" title="运算及函数"></a>运算及函数</h3>
                  <p>在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：</p>
                  <h5 id="清单-21-LESS-文件"><a href="#清单-21-LESS-文件" class="headerlink" title="清单 21 . LESS 文件"></a>清单 21 . LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="variable">@init:</span> <span class="number">#111111</span>; </span><br><span class="line"><span class="variable">@transition:</span> <span class="variable">@init</span>*<span class="number">2</span>; </span><br><span class="line"><span class="selector-class">.switchColor</span> &#123; </span><br><span class="line"><span class="attribute">color</span>: <span class="variable">@transition</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-22-CSS-文件"><a href="#清单-22-CSS-文件" class="headerlink" title="清单 22. CSS 文件"></a>清单 22. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.switchColor</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#222222</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表：</p>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">lighten</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">// return a color which is 10% *lighter* than @color </span></span><br><span class="line"><span class="selector-tag">darken</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">// return a color which is 10% *darker* than @color </span></span><br><span class="line"><span class="selector-tag">saturate</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">// return a color 10% *more* saturated than @color </span></span><br><span class="line"><span class="selector-tag">desaturate</span>(<span class="variable">@color</span>, <span class="number">10%</span>);<span class="comment">// return a color 10% *less* saturated than @color </span></span><br><span class="line"><span class="selector-tag">fadein</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">// return a color 10% *less* transparent than @color </span></span><br><span class="line"><span class="selector-tag">fadeout</span>(<span class="variable">@color</span>, <span class="number">10%</span>); <span class="comment">// return a color 10% *more* transparent than @color </span></span><br><span class="line"><span class="selector-tag">spin</span>(<span class="variable">@color</span>, <span class="number">10</span>); <span class="comment">// return a color with a 10 degree larger in hue than @color </span></span><br><span class="line"><span class="selector-tag">spin</span>(<span class="variable">@color</span>, -<span class="number">10</span>); <span class="comment">// return a color with a 10 degree smaller hue than @color</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>PS: 上述代码引自 LESS CSS 官方网站，详情请见 <a href="http://lesscss.org/#-color-functions" target="_blank" rel="noopener">http://lesscss.org/#-color-functions</a> 使用这些函数和 JavaScript 中使用函数一样。</p>
                  <h5 id="清单-23-LESS-文件"><a href="#清单-23-LESS-文件" class="headerlink" title="清单 23. LESS 文件"></a>清单 23. LESS 文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="attribute">init</span>: <span class="number">#f04615</span>; </span><br><span class="line"> <span class="selector-id">#body</span> &#123; </span><br><span class="line">  <span class="attribute">background-color</span>: fadein(<span class="variable">@init</span>, <span class="number">10%</span>); </span><br><span class="line"> &#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>经过编译生成的 CSS 文件如下：</p>
                  <h5 id="清单-24-CSS-文件"><a href="#清单-24-CSS-文件" class="headerlink" title="清单 24. CSS 文件"></a>清单 24. CSS 文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-id">#body</span> &#123; </span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#f04615</span>; </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。 LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。</p>
                  <h3 id="模式匹配"><a href="#模式匹配" class="headerlink" title="模式匹配"></a>模式匹配</h3>
                  <h5 id="清单-25-LESS文件"><a href="#清单-25-LESS文件" class="headerlink" title="清单 25. LESS文件"></a>清单 25. LESS文件</h5>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.tri</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">overflow</span>: hidden;</span><br><span class="line">	<span class="selector-class">.triangle</span>(bottom);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.triangle</span>(top,<span class="variable">@w</span>:<span class="number">5px</span>,<span class="variable">@c</span>:<span class="number">#CCC</span>)&#123;</span><br><span class="line">	<span class="attribute">border-width</span>: <span class="variable">@w</span>;</span><br><span class="line">	<span class="attribute">border-color</span>: transparent transparent red transparent;</span><br><span class="line">	<span class="attribute">border-style</span>: dashed dashed solid dashed;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.triangle</span>(bottom,<span class="variable">@w</span>:<span class="number">5px</span>,<span class="variable">@c</span>:<span class="number">#CCC</span>)&#123;</span><br><span class="line">	<span class="attribute">border-width</span>: <span class="variable">@w</span>;</span><br><span class="line">	<span class="attribute">border-color</span>: red transparent transparent  transparent;</span><br><span class="line">	<span class="attribute">border-style</span>: solid dashed dashed  dashed;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <h5 id="清单-26-CSS文件"><a href="#清单-26-CSS文件" class="headerlink" title="清单 26. CSS文件"></a>清单 26. CSS文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.tri</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">border-width</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border-color</span>: red transparent transparent  transparent;</span><br><span class="line">  <span class="attribute">border-style</span>: solid dashed dashed  dashed;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>通过以上可以看出，我们可以在LESS中定义相同名字的样式，第一个参数不同，在调用时可以通过传入第一个参数进行匹配，得到不同的样式即可。</p>
                  <h3 id="避免编译"><a href="#避免编译" class="headerlink" title="避免编译"></a>避免编译</h3>
                  <h5 id="清单27-LESS文件"><a href="#清单27-LESS文件" class="headerlink" title="清单27. LESS文件"></a>清单27. LESS文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.test</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="built_in">calc</span>(<span class="number">300px</span>-<span class="number">30px</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <h5 id="清单28-CSS文件"><a href="#清单28-CSS文件" class="headerlink" title="清单28. CSS文件"></a>清单28. CSS文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.test</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">270px</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>有时候一些样式如果编译了之后就会产生不必要的麻烦，如果我们不想要编译，可以改写如下</p>
                  <h5 id="清单29-LESS文件"><a href="#清单29-LESS文件" class="headerlink" title="清单29. LESS文件"></a>清单29. LESS文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.test</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:~<span class="string">'calc(300px-30px)'</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <h5 id="清单30-CSS文件"><a href="#清单30-CSS文件" class="headerlink" title="清单30. CSS文件"></a>清单30. CSS文件</h5>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.test</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">300px</span>-<span class="number">30px</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>通过在前面加上一个 ~然后将内容用引号引起来，就可以避免编译了。</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>本文提到的只是 LESS 的基本功能，更高级的功能如：字符串插值，服务器端使用配置，JavaScript 表达式，避免编译等可以参看 LESS 的官方网站。 LESS 以 CSS 语法为基础，又借用了很多我们熟知编程式语言的特性，这对于我们开发人员来讲学习成本几乎可以忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，LESS 为我们提供了一种新的编写样式表的方法，我们可以根据我们的项目特性选择使用 LESS 的部分特性，我们只需用很少的成本就可以换了很大的回报，一句话，Less is more，借助 LESS 可以更便捷的进行 Web 开发。</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-05-08 14:16:19" itemprop="dateCreated datePublished" datetime="2015-05-08T14:16:19+08:00">2015-05-08</time>
                </span>
                <span id="/1760.html" class="post-meta-item leancloud_visitors" data-flag-title="LESS学习记录" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>8.2k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>7 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1722.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> 个人日记 <i class="label-arrow"></i>
                  </a>
                  <a href="/1722.html" class="post-title-link" itemprop="url">记一次泰安方特之旅</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <p>等啊等，终于等到五一放假，这次必须要出去好好玩一番，解脱一下，释放一下。经过一系列思想斗争，最终决定去泰安方特了！昨天方特之旅结束之后，甚是爽快，在此记流水账一篇，不喜勿喷哈！ 话说回来还是要先说五月二号啊，简直了，本来打算是在五月二号去的，带上室友小周周和隔壁的花花学长。一号那天我定了第二天的火车，早上7点半的火车，室友小周周也提前约好了出租车，准备早上六点出发去火车站。万事俱备只欠东风了，当天晚上早早滚去睡觉，定好五点半的闹钟，准备静静等待闹钟的响起。可是，可是，一切都是来得那么突然，第二天一大早起来竟然下雨了！泰安那边下雨了！天哪，睡之前我还特意看了看二号是多云啊！这不是坑爹吗？下雨就下雨吧，可是你不知道下雨方特室外项目是不开放的好嘛！顿时心都凉了。╮(╯▽╰)╭ 哎，改签吧，小周周给那位出租司机打电话，我去重新改签票。嗯，又一个坑爹的事情发生了，7点之前网上购票是不开放的好嘛？发车前两小时是不能在网上改签和退票的好嘛？哎，算了，还好票便宜，才十二块五，索性我不要了！不要了！默默去买了三号的车票，特么的还是无座啊，无座。哎，多么痛的领悟，╮(╯▽╰)╭。 然后，然后，就默默等到了三号，还是五点半的闹钟，这次终于不下雨了！苍天啊！带上手机，耳机，money，学僧证，充电宝，六点出门坐上TAXI，朝火车站奔去，这次是真快啊这速度，路上都没车的，一路狂奔，竟然六点半多点就到了火车站了，可是我们七点半的火车啊，这不是坑爹吗？于是乎，我们决定改签一下提前一点，有个七点稍多的一趟车，于是乎我们兴冲冲地跑向了改签大厅，惊呆了！怎么它就那么长的队伍，哦你，那么长，么长，长。试着排了排，二十分钟往前走了不到十步，也是醉了。哎，默默走掉，去候车室等着吧，七点半就七点半！ 呼呼呼，检票咯，K771，我们走上站台，看到一条漫长的绿皮车，不是说好的无座吗？怎么这么多空座，我们三个找到一个就坐下来，不得不再次吐槽一下这种座位真难受。早上好困，睡觉睡觉，带上耳机听着歌，像打坐一样睡着了，就那么睡着了，我好佩服我自己。睡了一个小时，一睁眼，泰山站到了，不错不错，下车，出发。 出站了，果然不出我所料，好多人都拿着牌子，问去方特吗？免费接送，立即出发，同时卖门票，220一位，其实方特门票就是220的，学生票可能就便宜10块钱。哎，这样就这样吧，他们是打着免费接送的名义，实质钱都包含在门票里面了。我们也担心方特人特别多，到时候买票排个时候，就直接跟着他走吧，反正也贵不了多少。 车是一个公交车，等人来齐了一起发车出发，我们几个竟然赶到了第一波，进去的时候车是空的，要等到其他人来才发车，这不是坑爹吗？坑爹吗？说好的立马出发的呢？算了，不计较这些了，其实等了也没多久就走了。在车上交了钱买了门票，那个收钱的人（姑且叫导游吧）跟我们讲了方特的各个注意事项，还是挺贴心的嘛！在这里透露给大家一点，记不住的我就记不住了。 包包最好要寄存起来，最好寄存在方特外面，比较便宜，当然也可以背着如果你不嫌沉的话。 贵重物品一定要看管好，方特里面丢的最多的就是数码相机，然后是手机，保管好了就行咯。 如果你不想一开始就玩惊险刺激的，建议从右边开始玩，如果你一开始就想玩刺激的，建议还是从右边开始玩哈哈哈。 项链啊首饰啊最好要收起来，要不然你想体验在空中翻滚的时候项链打到牙的感受吗？ 哦，其他的忘了，我也不知道他说了多少了，可能比较健忘，记不起来还有啥了。后面的我就根据我的亲身体验来说了，哈哈。 走了半个多小时，终于到了！我们去存上包，买好雨衣以防神秘河谷的时候淋湿。正式进门！进门！冲冲冲！方特之旅正式开始！差不多九点半！ 放个地图先 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150504150649.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150504150649.jpg" alt="20150504150649"></a> 恩，进去看过去就是一个方特城堡，好有艺术气息的，旁边还放着欢乐的音乐，走在小路上，还有阳光照射着，哈哈不错。而且关键是路上人好少啊，哈哈，是不是五月三号外地的都回家了呢？是吗？后面你就知道了。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/4d6577b5ga2451346b0fc690690.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/4d6577b5ga2451346b0fc690690.jpg" alt="4d6577b5ga2451346b0fc&amp;690&amp;690"></a> 恩，我们没有进城堡玩，直接奔向右边的飞跃极限。噢丫，谁说的人少的？谁说的人少的？人都跑进来了，排队啊，一层、两层、三层…不数了，心好累。也就十来层吧。排个毛线，我们直接冲向了下一站，神秘河谷。PO个图先 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/255405771681257058.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/255405771681257058.jpg" alt="25540577,1681257058&amp;"></a> 简直是人品好，我们进去的时候竟然排到了前面，是不是刚开放就被我们赶上了呢？而且，我们赶上了第一波。这次在外面买的雨衣派上用场了，穿上我们的半透明红色雨衣，带上蓝色高筒鞋套，上船。船一排四个人，一共好像是五排吧，我们很果断地选择了第一排，雨衣全部裹起来。准备冲，看到图了吗？这是一个小船从河谷里面二十米高空俯冲下来的样子，看那浪花。这次我们真正地感受到了它的魅力。河谷里面其实是有两个小下坡的，第一次比较小，杀杀你的锐气，第二次就是图中这个超大的下坡，从楼顶的那个位置冲下来，自己想象！第一次下坡还好，等到第二次下坡的时候，啊啊啊啊，二三十米高空俯冲，那种朝下的重力加速度深深牵引着我们，俯冲的时候我们叫喊着，咆哮着，嘶吼着，身心全部都感受着重力加速，咣！超大的浪花被我们激起来了，溅起十多米，丫的坑爹的是浪花不只是超前喷的啊，特么的它在空中划了一道优美的弧线直接想瓢泼一样泼到了我们身上啊，尤其是第一排啊第一排，最惨烈啊，尼玛我当初怎么就选了第一排啊，这不是坑爹吗？我真的是穿了雨衣，但是我屁股底下的雨衣不够长啊，水落到了座位上，然后水就浸到我的裤子里面去了啊，一阵凉意袭来，嗖嗖嗖，我屁股湿了，湿了。坑爹啊，这雨衣抵了个毛用啊。随后船缓缓划回去，出来的时候我走出来，屁股底下湿了一片，像尿了裤子一样，怎么能这样啊？我才玩了一个就湿了，湿了啊，╭(╯^╰)╮ 怎么这样。 还好太阳好，我就叉开腿走着，自己想象！赶紧的太阳把我的裤子晒干吧。接下来我们去了维苏威火山，听说这个还不错。果然，走到旁边就听到了火山里面一群人的嘶吼，开始排队吧，人也不大多啊，应该还是人品好的缘故吧，嗖嗖就排上了。PO个图先 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/3e4c18d1g778440eee0a9690.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/3e4c18d1g778440eee0a9690.jpg" alt="3e4c18d1g778440eee0a9&amp;690"></a> 对，就是这么酷炫，这就是传说中的过山车，一个个小匣子接起来，我和花花坐在了一个匣子里，抓紧扶手，小车就开动了，呼呼呼，伴随着轮子的摩擦，伴随着我们的尖叫，在急转弯的地方，车呼啸而过，整个人有种呼之欲出的感觉，巨大的离心力简直爽到爆。一个又一个急转，一次又一次的钻洞，一声又一声的呐喊，一下又一下的心跳。自行想象！ 出来之后旁边有个火流星，可是排队的人太多了，机智的我们就继续绕，看到有一个影视特技演出室刚开放，就跑进去了。尼玛一进去就是一个人在表演剁手，当然那刀是假的，duang，duang，duang，加了特效而已，后来欣赏了一点电影特效制作的过程，整体不算经验刺激，还说得过去吧。 后来继续绕，到了未来警察和生命之光那里，可惜的是都没有到开放的点，就去了星际航班，这下排队的人真多，到底什么鬼，干嘛的。我先PO个图 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/500_6935_7e6f4c36_7e6f4c36-e1430727030482.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/500_6935_7e6f4c36_7e6f4c36-e1430727030482.jpg" alt=""></a> 别看这个外面有个火箭什么的，这么酷炫，其实进去啊，我总算见识到了，排了半个小时队，最后二十个人坐在一个舱里，这个舱是可以动的，上下左右倾斜，可以模拟一下加速度什么的，然后整个前面就是一个超大的圆形幕布，像放电影一样，来给你模拟一个飞行的过程。随着画面的切换，舱左右摆动，也算是逼真。出来之后看到外面这个火箭，我本来还真以为要飞天呢，结果给我整这么一出，我也是醉醉的。 接下来就是恐龙危机了，一走过去吓我一跳啊，这是什么玩意翻了啊，上面的字怎么还是倒着的？好吧，经过缓过神来，不得不佩服这建筑真是溜啊，真是设计师逼死建筑师的典范啊，来来来，看图你就知道我为啥这么说了，尼玛这整个建筑都被恐龙掀翻了好嘛？ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/XocG88iM553THvvg.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/XocG88iM553THvvg.jpg" alt="XocG88iM553THvvg"></a> 虽然外面看着是倒着的，不过进去之后是正着的。呸，我这不废话么，倒着谁能走啊？进去也是想刚才那样，几个人坐在一个小车里，有个跑道，小车会在跑道上走，有时候转来转去。而四周当然就是恐龙咯，带上4D眼镜，能够看到周围银幕上一只只恐龙扑过来，小车上还有各种音效。小车有时候没油了，有时候加速了，有时候甩尾了，有时候弹飞了，模拟得非常逼真。特么的走到一个地方上面突然出现一个霸王龙头啊，这次不是屏幕出来的啊，是实物啊，一动一动的，它的牙像魔鬼的爪牙，还迈着魔鬼的步伐，在我不经意间粗线了啊，不能忍，特么的还长着嘴朝着我吼啊，吓尿了有木有。晃来晃去，这破小车终于抵达了传说中的安全地带，我也解脱出来了，╭(╯^╰)╮。臭霸王龙。 哎呦终于出来了，这也不能光玩室内的啊，来点室外的体验一把。于是乎，我们走到了一个叫波浪翻滚的东西那里，我了个去，这不就是济南泉城公园里面的遨游太空加强版吗？ 遨游太空是这样子的 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150504202138.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150504202138.jpg" alt="20150504202138"></a> 这里的波浪翻滚是这样子的，这何止是一样啊，这简直就是一样啊！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/1278644413015_1_o.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/1278644413015_1_o.jpg" alt="1278644413015_1_o"></a> 坐在那上面，就尽情地摇摆摇摆吧，飞上来，飞上去，有时候这玩意还是倾斜的啊，哦飞天的感觉真爽哈哈哈！ 接下来就是传说中的大摆锤了，据说好多人都在这一关不行不行的了，上吐下泻的统统地都有。我记得还有人说买了一张票一开始就坐了个大摆锤，直接不行了，后面的项目都玩不了了，合着220块钱就坐了个这个，真值！我还是准备挑战一下，会会它，看看这玩意到底多么厉害。先PO图一张。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20131119GAig3-e1430744520488.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20131119GAig3-e1430744520488.jpg" alt="20131119GAig3"></a> 嗯，就是这个样子滴，它一边摆，一边转啊，最开始摆的角度是很小的，后来最高的时候都有90度了吧，我一边承受着离心力，一边又在半空中飘荡，简直有一种超凡脱俗的感觉。啊，当到达最高点的时候，我整个人横在了半空中同时围绕着中间的转轴在转啊，转啊。神马姿态，多么优美啊！我当时脑子里在想神马？我还活着吗？神呐。 最终，我还是活着下来了，然后又来了一个刺激的，体验蹦极的感觉。PO图一张，先提前感受一下。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/624188preview4.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/624188preview4.jpg" alt="624188preview4"></a> 对，就是它！太空飞梭，哈哈哈哈，体验一下从100米高空坠落的感觉吧！上去坐在座位上绑好了，深呼吸一下，就在那一瞬间，就是那一瞬间，座位以一个超快的速度飞到架子的顶端啊！注意它不是缓缓上去的啊，是突然地一下，升到最上面，只需要短短几秒，那一瞬间啊，我的天，周围的人的呐喊，小周周的咆哮，花花的哭喊混成一团，就像火箭升空的感觉一样。然后，座位在空中停住了，尼玛这时候我们已经升到了最高的地方了啊。还不够形象，再来一张图！<img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504211315.png" alt="QQ截图20150504211315"> 将近一百米的高空，我们坐在座位上，腿是悬空的，朝下一瞅你可能就会昏死过去。然后，然后！这座位突然不受力了，直接自由落体！我们也跟随着座位飞下来，呐喊声，咆哮声混作一团，而我也在撕吼，啊啊啊啊。真正的自由落体，感受到了吗？而且它接下来还没完啊，又升上去，然后又来一次降下来。呼呼呼呼呼，简直了！！嗯，最后我还是活着下来了。 其实，这个还真的不够刺激，然后我们又来了一个刺激的，空中飞舞，哈哈哈，堪称一绝了。先PO个图感受一下。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504211949-e1430750658538.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504211949-e1430750658538.png" alt=""></a> 简直了，这个巨大的翅上都坐着人，翅子这玩意不仅是自己在转，而且这个长臂在左右上下摇摆，尼玛可想而知我们的人在天上是波浪翻滚啊，朝上甩，朝下甩，朝左甩，朝右甩，有时倒这甩，有时正着甩。有没有玩过小时候的波浪鼓，我们这些人就想波浪鼓上面的两个圆球，各种甩，各种浪，在上面想不喊都不行，在上面我们的撕吼声简直是无与伦比，有时真的感觉自己就要被甩出去的样子，自己感受一下吧。这个简直是爽哭我了，花花直接吓得没敢坐，我和小周周真是感受到了这玩意的魅力，太浪了，也是浪到不行不行的。 接下来坐了坐勇敢者转盘，就是它！就是它！罪该万死的家伙！直接把我转晕了！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/68a8f2b5-02d5-4fda-87cb-ae5fca294f04.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/68a8f2b5-02d5-4fda-87cb-ae5fca294f04.jpg" alt="68a8f2b5-02d5-4fda-87cb-ae5fca294f04"></a> 别看他只是个转盘拉着一个个小车在那里转，其实它离心力特别大，我的腿在小车里简直都抬不起来。看到这个转盘下面的支撑臂了没？一开始它是平的啊，也就是说我们最开始是在水平面上转的，随着时间推移，这个臂慢慢往上升，升到将近90度的样子，尼玛我就简直被离心力牵引着在转啊，你可以想想我在最高处就是脚朝上头朝下在转啊转啊转啊转。而且离心力没那么大的话我还是斜着的好嘛？我的脖子也在不由自主地斜着，出来的时候真是转得我晕死了，脖子差点没正过来啊尼玛。 就是因为这个破玩意，我走路都开始晕了，趴桌子上一会，碎一觉，就没事了，起来接着浪！ 恩，然后接下来就是飞越极限了，这个效果简直赞啊。排队的人虽然多，但是一次性进去50多个人一起飞。坐在椅子上，脚是悬空的，在眼前会有一个超大超大的银幕，先PO图一张。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/W020140505433553648700.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/W020140505433553648700.jpg" alt="W020140505433553648700"></a> 应该就是这种感觉吧，一排排人坐着，座位可以模拟飞行时的感受，比如模拟加速，左右转等等的动作，相当逼真，而且还吹着风，模拟一下风中飞行的感觉。当然最享受的还是眼前的超大的幕布，一幅幅3D效果的画面，有艾菲尔铁塔，金字塔，故宫，长城，布达拉宫，大峡谷，珠穆朗玛峰，东方明珠等等，风景特别多。在飞行的过程中带你穿越世界各地，游遍千山万水。实在是太棒，不得不赞一个。像的看了一个超大的电影偶也！ 恩，最最最重头戏来了，火流星！号称是最惊险刺激的一个项目，如果你一开始坐了这个，其他的真的一点意思都没有，所以我们把这个放在了最后。来张图先感受一下。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20131216191455574-e1430747766704.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20131216191455574-e1430747766704.jpg" alt="20131216191455574"></a> 哈哈哈，害怕了吧，整个人都是坐在座位上脚是完全悬空的，图上的人在以一个超快的速度在做空中大反转，我估计他们差点就要被甩出去了。来张全图感受一下。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504215457.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504215457.png" alt="QQ截图20150504215457"></a> 恩，这跑道有正的有倒的，最高处差不多有三十四米。花花没有一起坐这个，我和小周周去尝试了。绑好之后，我们在那条长直道上慢慢地往上升，尼玛在升的过程中其实是比较慢的，十米，二十米，三十米，升的过程中我的脚下是悬空的，没有任何踩踏的地方，朝下一看，整个就是一大悬崖啊，啊啊啊。我想，一声我爱过这个世界足以表达我当时的感受。接着升到最高地方，就立即向下俯冲了，尼玛啊，简直就是自由落体一般的速度啊，而且这轨道它还不是一个平稳的正圆啊，跑道就像麻花一样向前延伸着，而我们就一边在自转一边向下俯冲，我的妈啊，全车的人都在喊叫，整个在穿梭的过程中肩膀被死死压着，一个巨大的扭转力扭动着我的身体，身体向前前进的同时在做大回环运动。这还不算完，降落到最低点之后接着又是一个上升，一个弧形的360度大回环跑道，那时我们的脚完全是在上方，头在下方，死死地卡在座位上，巨大的离心力给我的身体难以承受之重。图中那么长的跑道，跑完需要多久？2分钟？1分钟？不，只需要30秒！30秒啊！那速度简直太快了，一个劲的酸爽，真能到达极限了。下来之后，感觉整个人都接受了全身的按摩，浑身的酥麻感觉，也是爽到不行不行的！ 火流星，真是名副其实，就像太空穿梭一遍回来了一样，无法比拟的刺激。嗯，坐完这个心里就踏实了。哈哈。 后来就是几个比较放松的项目了，海螺湾，生命之光，转转杯，放松体验一下，最后爬了一下方特城堡，也算是圆满了。 晚上在方特门口拍了拍照，买了个西部牛仔帽子，留作纪念。方特之旅正式圆满结束！偶也！ 最后PO图几张，留作纪念！真是开心！愉快！ 再见！方特！再见！泰安！么么哒！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504221857-e1430749176983.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504221857-e1430749176983.png" alt="QQ截图20150504221857"></a> <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504222004.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504222004.png" alt="QQ截图20150504222004"></a> <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504222028.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504222028.png" alt="QQ截图20150504222028"></a><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/QQ截图20150504221741-e1430749091293.png" alt="QQ截图20150504221741"></p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-05-04 13:43:58" itemprop="dateCreated datePublished" datetime="2015-05-04T13:43:58+08:00">2015-05-04</time>
                </span>
                <span id="/1722.html" class="post-meta-item leancloud_visitors" data-flag-title="记一次泰安方特之旅" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>5.9k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>5 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1711.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> Other <i class="label-arrow"></i>
                  </a>
                  <a href="/1711.html" class="post-title-link" itemprop="url">良好的代码风格养成记</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>优秀的代码风格如同一身得体的打扮，能够给人以良好的印象。初学程序设计，首先必须建立良好的编程习惯，这其中就包括代码风格。本文就代码风格中的几个重点问题进行了讨论，并在文后给出了一份优秀的代码作为风格模板。代码风格不必花费太多专门的时间研究，在使用中不断模仿模板代码，轻轻松松就能写出“专业的代码”。</p>
                  <h2 id="80字符，代码行极限"><a href="#80字符，代码行极限" class="headerlink" title="80字符，代码行极限"></a>80字符，代码行极限</h2>
                  <p>无论时空怎么转变，世界怎样改变，一行80字符应始终铭记心间。古老的Unix终端以80列的格式显示文本，为了让源代码与手册具有最佳的可读性， Unix系统始终坚持着80列的传统。80列不多不少，足够写出一行有意义的代码，同时也足够显示在终端屏幕，足够打印在A4纸上。虽然时至今日，我们的屏幕分辨率早已足够高，一行能够显示的内容远超超过80字符，但我们的优秀传统已经形成──几乎所有的Unix/Linux内核源代码以及联机用户手册都严格地遵守着80列极限。如果你正好在使用Windows平台下的Dev C++，你是否有注意到代码编辑框里那条细细的灰色竖线？不错，那正是代码行极限。除了HTML、XML等冗长繁复的标记式语言，几乎所有的语言都需要严格遵守代码行极限，这包括C、C++、Java、C#、Python、PHP等等。不过有时，比如当PHP跟HTML打交道的时候，这个限制是可以暂时放松的。过长的代码行总是不好的，好的代码要始终保持苗条的身材。</p>
                  <h2 id="Tab还是Space，众说纷纭的缩进方式"><a href="#Tab还是Space，众说纷纭的缩进方式" class="headerlink" title="Tab还是Space，众说纷纭的缩进方式"></a>Tab还是Space，众说纷纭的缩进方式</h2>
                  <p>代码离不开缩进，关于缩进主要有两个争论，一个是该用空格（Space）还是用制表符（Tab），另外一个是该用4格缩进还是8格缩进甚至都不是。 先来谈谈Space与Tab的问题。坚持用Space的程序员会告诉你，如果你从来都不用Tab，那么你的代码放到所有的地方看都是一样的。没错，这是用Space缩进的优点，可惜的是，这是它唯一的优点。代码层次越多，内层代码最前面的缩进便越多，这意味着你需要敲很多很多次空格。即使你能忍受不厌其烦地按空格键直到它坏掉，你也一定会被IDE总是自作聪明地插入一些Tab字符的行为烦恼不已。建议总是使用Tab缩进，因为几乎所有的代码（不仅仅是C 代码）都在使用Tab缩进。 Tab到底是4格还是8格？这是Tab缩进会被某些人诟病的根源。当你写程序时使用的Tab大小与别人读程序时使用的Tab大小不同时，再漂亮的排版也会变得杂乱无章。标准的Tab是8格的，而不幸的是，几乎所有的Windows平台下的IDE，包括 Visual Studio、Dev C++，甚至跨平台的Eclipse等，都默认使用4格Tab。我使用的FreeBSD系统的所有的内核源代码都采用8格缩进，所以我一直坚持使用8格缩进。也许你不习惯太大的间距，如果不是在Unix平台下，或者不是C语言，那就采用4格Tab吧。如果你在Unix下编写C代码，使用8格的标准Tab是更好的习惯。</p>
                  <h2 id="折行原则，容易被忽略的角落"><a href="#折行原则，容易被忽略的角落" class="headerlink" title="折行原则，容易被忽略的角落"></a>折行原则，容易被忽略的角落</h2>
                  <p>既然有代码行极限，很多情况下我们不得不断开一个完整的代码行，这就带来了一个问题：折行后应该如何缩进？好的做法是，第一次折行后，在原来缩进的基础上增加1/2的Tab大小的空格，之后的折行全部对齐第二行。可能这样的文字描述过于晦涩了，还是举个例子罢（以8格缩进为例）：</p>
                  <figure class="highlight ceylon">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">if</span> (<span class="keyword">value</span> &gt; a &amp;&amp; <span class="keyword">value</span> &gt; b &amp;&amp; <span class="keyword">value</span> &gt; c &amp;&amp; <span class="keyword">value</span> &lt; d &amp;&amp; <span class="keyword">value</span> &lt; e &amp;&amp; <span class="keyword">value</span> &lt; f</span><br><span class="line">    <span class="keyword">value</span> &lt; h &amp;&amp; <span class="keyword">value</span> &lt; h) &#123; <span class="comment">/* 注意折行后的缩进 */</span></span><br><span class="line">        <span class="keyword">value</span> = <span class="keyword">value</span> + <span class="number">1</span>;</span><br><span class="line">        <span class="keyword">value</span> = <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span></span><br><span class="line">            * <span class="keyword">value</span> * <span class="keyword">value</span> + <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span> * <span class="keyword">value</span></span><br><span class="line">            * <span class="keyword">value</span> * <span class="keyword">value</span>; <span class="comment">/* 注意再次折行后的缩进 */</span></span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>显然这个段代码没有任何实际用处，只是为了说明折行缩进而编造的。</p>
                  <h2 id="无处不在的空格，无处不在的空行"><a href="#无处不在的空格，无处不在的空行" class="headerlink" title="无处不在的空格，无处不在的空行"></a>无处不在的空格，无处不在的空行</h2>
                  <p>需要空格的位置有：</p>
                  <ul>
                    <li>if、while、switch等关键字与之后的左括号(之间。</li>
                    <li>左花括号{之前。</li>
                    <li>双目运算符两侧，例如p == NULL。</li>
                    <li>逗号,与分号;之后，例如for (i = 0; i &lt; 10; i++)。</li>
                  </ul>
                  <p>不要空格的位置有：</p>
                  <ul>
                    <li>函数名与之后的左括号(，包括带参数的宏与之后的左括号(，例如max(a, b)。</li>
                    <li>分号;与冒号:之前。</li>
                    <li>左括号(右边，右括号)左边，例如if (p == NULL)。</li>
                  </ul>
                  <p>需要空行的位置有：</p>
                  <ul>
                    <li>函数的定义之前、函数的定义之后</li>
                    <li>一组联系紧密的代码段之前和之后</li>
                  </ul>
                  <p>这些规则并不完全，当你碰到上面没有列举出来的情况时，请参考本文提供的模板代码。</p>
                  <h2 id="左花括号的争议──换行乎？不换乎？"><a href="#左花括号的争议──换行乎？不换乎？" class="headerlink" title="左花括号的争议──换行乎？不换乎？"></a>左花括号的争议──换行乎？不换乎？</h2>
                  <p>这又是一个仁者见仁智者见智的问题了。从使代码更清晰的角度看，作为代码段开头标识的左花括号{应该另起一行：</p>
                  <figure class="highlight awk">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">if</span> (p == NULL)</span><br><span class="line">&#123;</span><br><span class="line">        printf(<span class="string">"error!\n"</span>);</span><br><span class="line">        <span class="keyword">exit</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>可是，这看起来实在不够紧凑，所以大部分的C代码（至少Unix上如此）都采用了这样的方式：</p>
                  <figure class="highlight awk">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">if</span> (p == NULL) &#123;</span><br><span class="line">        printf(<span class="string">"error!\n"</span>);</span><br><span class="line">        <span class="keyword">exit</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我的建议是采用后者，这会使你的代码显得更加紧凑，也更加专业。需要说明一个特例，在定义函数时，我们总是要给左花括号 { 换行：</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="function"><span class="keyword">static</span> <span class="keyword">int</span> <span class="title">maxint</span><span class="params">(<span class="keyword">int</span> a, <span class="keyword">int</span> b)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">        <span class="keyword">return</span> a &gt; b ? a : b;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>额，不过我还是不太习惯额</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>本文介绍了编程的代码风格，希望对大家有帮助 本文内容为转载，<a href="http://blog.csdn.net/tolys/article/details/1807360" target="_blank" rel="noopener">原文出处</a></p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-30 23:47:18" itemprop="dateCreated datePublished" datetime="2015-04-30T23:47:18+08:00">2015-04-30</time>
                </span>
                <span id="/1711.html" class="post-meta-item leancloud_visitors" data-flag-title="良好的代码风格养成记" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>2.3k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>2 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1691.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> HTML <i class="label-arrow"></i>
                  </a>
                  <a href="/1691.html" class="post-title-link" itemprop="url">几款优秀的前端UI框架</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <p>目前响应式布局和扁平化越来越风靡，前端UI框架也是风生水起，在这里分享几款优秀的前端UI框架</p>
                  <h2 id="BootStrap"><a href="#BootStrap" class="headerlink" title="BootStrap"></a>BootStrap</h2>
                  <p>相比这个大家都听说过吧，Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427144535.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427144535.jpg" alt="20150427144535"></a> <a href="http://getbootstrap.com/" target="_blank" rel="noopener">官网链接</a> <a href="http://www.bootcss.com/" target="_blank" rel="noopener">中文链接</a></p>
                  <h2 id="Foundation"><a href="#Foundation" class="headerlink" title="Foundation"></a><strong>Foundation</strong></h2>
                  <p>与Bootstrap相比，Foundation屈居第二，不过这并不能说明它不受欢迎。 ZURB在后面强有力的支持，使得 Foundation 更加强大！Foundation被各大网站使用，如Facebook、Mozilla、Ebay、 Yahoo、美国国家地理网站等等。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427154906.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427154906.jpg" alt="20150427154906"></a> <a href="http://foundation.zurb.com/" target="_blank" rel="noopener">官网链接</a> <a href="http://www.foundcss.com/" target="_blank" rel="noopener">中文链接</a></p>
                  <h2 id="Semantic-Ui"><a href="#Semantic-Ui" class="headerlink" title="Semantic Ui"></a>Semantic Ui</h2>
                  <p>语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427155432.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427155432.jpg" alt="20150427155432"></a> <a href="http://semantic-ui.com/" target="_blank" rel="noopener">官网链接</a> <a href="http://www.semantic-ui.com.cn/" target="_blank" rel="noopener">中文链接</a></p>
                  <h2 id="Amaze-UI"><a href="#Amaze-UI" class="headerlink" title="Amaze UI"></a>Amaze UI</h2>
                  <p>Amaze UI 是一个移动优先的跨屏前端框架。… Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427155625.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427155625.jpg" alt="20150427155625"></a> <a href="http://amazeui.org/" target="_blank" rel="noopener">官网链接</a></p>
                  <h2 id="Purecss"><a href="#Purecss" class="headerlink" title="Purecss"></a>Purecss</h2>
                  <p>免费响应式CSS前端框架是有Yahoo发布的一个可以应用到所有web项目的小巧的、响应式的CSS模块集，Pure是建立在Normalize.css的基础上的，对HTML元素提供了布局和样式，增加了一些公共的并且是你需要的UI组件。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427160204.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150427160204.jpg" alt="20150427160204"></a> <a href="http://purecss.io/" target="_blank" rel="noopener">官网链接</a> <a href="http://pure-site.ap01.aws.af.cm/" target="_blank" rel="noopener">中文链接</a></p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-27 15:44:21" itemprop="dateCreated datePublished" datetime="2015-04-27T15:44:21+08:00">2015-04-27</time>
                </span>
                <span id="/1691.html" class="post-meta-item leancloud_visitors" data-flag-title="几款优秀的前端UI框架" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>580</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>1 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1687.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> JavaScript <i class="label-arrow"></i>
                  </a>
                  <a href="/1687.html" class="post-title-link" itemprop="url">JS对于Android和IOS平台的点击响应的适配</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>最近做项目的时候发现了一个非常奇怪的问题，就是对于click事件的响应。经过测试发现，对于IOS平台，直接监听click事件可能是没有响应的，而在Android和PC上则完全没有问题。所以通过获取设备信息实现了不同平台的不同监听。</p>
                  <h2 id="IOS监听"><a href="#IOS监听" class="headerlink" title="IOS监听"></a>IOS监听</h2>
                  <p>对于IOS设备，只监听click方法可能是没有响应的。解决方法就是监听 “touchend click”事件。 而对于Android和PC，则只监听click事件即可。</p>
                  <h2 id="平台检测"><a href="#平台检测" class="headerlink" title="平台检测"></a>平台检测</h2>
                  <p>我们利用userAgent来检测平台</p>
                  <figure class="highlight less">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">if</span> (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) &#123;</span><br><span class="line">    <span class="comment">//alert(navigator.userAgent);  </span></span><br><span class="line">    <span class="selector-tag">alert</span>(<span class="string">"iOS"</span>);</span><br><span class="line">&#125; <span class="selector-tag">else</span> <span class="selector-tag">if</span> (/(Android)/i.test(navigator.userAgent)) &#123;</span><br><span class="line">    <span class="comment">//alert(navigator.userAgent); </span></span><br><span class="line">    <span class="selector-tag">alert</span>(<span class="string">"Android"</span>);</span><br><span class="line">&#125; <span class="selector-tag">else</span> &#123;</span><br><span class="line">    <span class="selector-tag">alert</span>(<span class="string">"PC"</span>);</span><br><span class="line">&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>上面的JS代码可以检测三个平台。</p>
                  <h2 id="实现监听"><a href="#实现监听" class="headerlink" title="实现监听"></a>实现监听</h2>
                  <p>我们可以把方法自定义名字，比如</p>
                  <figure class="highlight javascript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">back_click</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		$(<span class="string">".group-names"</span>).show();</span><br><span class="line">		$(<span class="string">".groups:visible"</span>).hide();</span><br><span class="line">		$(<span class="keyword">this</span>).hide();</span><br><span class="line">	&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>然后跨平台实现监听</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">/* bind the event */</span></span><br><span class="line">	<span class="keyword">if</span> (<span class="regexp">/(iPhone|iPad|iPod|iOS)/i</span>.test(navigator.userAgent)) &#123;</span><br><span class="line">		$(<span class="string">".back"</span>).bind(&#123;<span class="string">"touchend click"</span>:back_click&#125;);</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		$(<span class="string">".back"</span>).bind(&#123;<span class="string">"click"</span>:back_click&#125;);</span><br><span class="line">	&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>通过以上监听便没有问题了。</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>通过以上方法便可以实现不同平台的监听。</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-26 13:02:48" itemprop="dateCreated datePublished" datetime="2015-04-26T13:02:48+08:00">2015-04-26</time>
                </span>
                <span id="/1687.html" class="post-meta-item leancloud_visitors" data-flag-title="JS对于Android和IOS平台的点击响应的适配" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>868</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>1 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1680.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> JavaScript <i class="label-arrow"></i>
                  </a>
                  <a href="/1680.html" class="post-title-link" itemprop="url">jQuery应用五之瀑布流效果的实现</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>这里我们来利用jQuery实现瀑布流效果。</p>
                  <h2 id="在线演示"><a href="#在线演示" class="headerlink" title="在线演示"></a>在线演示</h2>
                  <p>我们首先来在线演示一下效果，然后我们说一下是怎样的实现，点开链接进行预览吧 <a href="http://res.cuiqingcai.com/waterfall/" target="_blank" rel="noopener">在线预览</a></p>
                  <h2 id="代码分析"><a href="#代码分析" class="headerlink" title="代码分析"></a>代码分析</h2>
                  <p>首先我们在页面中加入了一些图片元素，都加到id为container的元素中，每一张图片都在一个class为box的容器里，然后里面是一张图片。</p>
                  <figure class="highlight applescript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">&lt;<span class="keyword">div</span> <span class="built_in">id</span>=<span class="string">"container"</span>&gt;</span><br><span class="line">        &lt;<span class="keyword">div</span> <span class="built_in">class</span>=<span class="string">"box"</span>&gt;</span><br><span class="line">            &lt;<span class="keyword">div</span> <span class="built_in">class</span>=<span class="string">"content"</span>&gt;</span><br><span class="line">                &lt;img src=<span class="string">"img/1.jpg"</span>&gt;</span><br><span class="line">            &lt;/<span class="keyword">div</span>&gt;</span><br><span class="line">        &lt;/<span class="keyword">div</span>&gt;</span><br><span class="line">&lt;/<span class="keyword">div</span>&gt;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在JS中，我们遍历了每一个box，实现box的位置为上一行高度最小的box的位置。</p>
                  <figure class="highlight pgsql">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">function</span> imgLocation()&#123;</span><br><span class="line">    var <span class="type">box</span> = $(".box");</span><br><span class="line">    var boxWidth = <span class="type">box</span>.eq(<span class="number">0</span>).width();</span><br><span class="line">    var num = Math.floor($(<span class="keyword">window</span>).width()/boxWidth);</span><br><span class="line">    var boxArr=[];</span><br><span class="line">    <span class="type">box</span>.<span class="keyword">each</span>(<span class="keyword">function</span>(<span class="keyword">index</span>,<span class="keyword">value</span>)&#123;</span><br><span class="line">        var boxHeight = <span class="type">box</span>.eq(<span class="keyword">index</span>).height();</span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">index</span>&lt;num)&#123;</span><br><span class="line">            boxArr[<span class="keyword">index</span>]= boxHeight;</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            var minboxHeight = Math.min.apply(<span class="keyword">null</span>,boxArr);</span><br><span class="line">            var minboxIndex = $.inArray(minboxHeight,boxArr);</span><br><span class="line">            $(<span class="keyword">value</span>).css(&#123;</span><br><span class="line">                "position":"absolute",</span><br><span class="line">                "top":minboxHeight,</span><br><span class="line">                "left":<span class="type">box</span>.eq(minboxIndex).position().left</span><br><span class="line">            &#125;);</span><br><span class="line">            boxArr[minboxIndex]+=<span class="type">box</span>.eq(<span class="keyword">index</span>).height();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>最后实现了滚动条滑动时的动态加载</p>
                  <figure class="highlight javascript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">scrollside</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> box = $(<span class="string">".box"</span>);</span><br><span class="line">    <span class="keyword">var</span> lastboxHeight = box.last().get(<span class="number">0</span>).offsetTop+<span class="built_in">Math</span>.floor(box.last().height()/<span class="number">2</span>);</span><br><span class="line">    <span class="keyword">var</span> documentHeight = $(<span class="built_in">document</span>).width();</span><br><span class="line">    <span class="keyword">var</span> scrollHeight = $(<span class="built_in">window</span>).scrollTop();</span><br><span class="line">    <span class="keyword">return</span> (lastboxHeight&lt;scrollHeight+documentHeight)?<span class="literal">true</span>:<span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>调用如下</p>
                  <figure class="highlight javascript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="built_in">window</span>.onscroll = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">if</span>(scrollside())&#123;</span><br><span class="line">                $.each(dataImg.data,<span class="function"><span class="keyword">function</span>(<span class="params">index,value</span>)</span>&#123;</span><br><span class="line">                    <span class="keyword">var</span> box = $(<span class="string">"&lt;div&gt;"</span>).addClass(<span class="string">"box"</span>).appendTo($(<span class="string">"#container"</span>));</span><br><span class="line">                    <span class="keyword">var</span> content = $(<span class="string">"&lt;div&gt;"</span>).addClass(<span class="string">"content"</span>).appendTo(box);</span><br><span class="line">                    $(<span class="string">"&lt;img&gt;"</span>).attr(<span class="string">"src"</span>,<span class="string">"./img/"</span>+$(value).attr(<span class="string">"src"</span>)).appendTo(content);</span><br><span class="line">                &#125;);</span><br><span class="line">                imgLocation();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>通过上述简单的设置我们就实现了瀑布流的效果。</p>
                  <h2 id="源码下载"><a href="#源码下载" class="headerlink" title="源码下载"></a>源码下载</h2>
                  <p><a href="https://github.com/cqcre/waterfall" target="_blank" rel="noopener">源码下载</a></p>
                  <h2 id="综述-1"><a href="#综述-1" class="headerlink" title="综述"></a>综述</h2>
                  <p>以上便是瀑布流效果的实现，希望对大家有一定帮助！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-24 15:44:34" itemprop="dateCreated datePublished" datetime="2015-04-24T15:44:34+08:00">2015-04-24</time>
                </span>
                <span id="/1680.html" class="post-meta-item leancloud_visitors" data-flag-title="jQuery应用五之瀑布流效果的实现" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>1.6k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>1 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1658.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1658.html" class="post-title-link" itemprop="url">OpenGL绘图实例五之平移缩放旋转</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>OpenGL中的变换可以分为下面的三种： 即模型变换、投影变换、视口变换。 模型变换其实就相当于图形的几何变换，包括平移、缩放、旋转等操作，下面我们来详细研究一下OpenGL中三种操作的函数应用。</p>
                  <h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2>
                  <p>在变换前我们首先要做一下准备工作，首先我们需要调用glMatrixMode函数来设置变换模式。 该方法介绍如下 <strong>glMatrixMode(Glenum mode)</strong>，设置当前矩阵模式，它具有三个参数，分别为<strong>GL_MODELVIEW</strong>，<strong>GL_PROJECTION</strong>，<strong>GL_TEXTURE</strong>。三个参数的含义为：</p>
                  <blockquote>
                    <p><strong>GL_MODELVIEW</strong>,对模型视景矩阵堆栈应用随后的矩阵操作，也就是针对本节的模型几何变换设置的模式，本节所有内容均为此模式。 <strong>GL_PROJECTION</strong>,对投影矩阵应用随后的矩阵操作，在投影变换中设置的模式。 <strong>GL_TEXTURE</strong>,对纹理矩阵堆栈应用随后的矩阵操作，在设置动态纹理的过程中设置的模式。</p>
                  </blockquote>
                  <p>所以，在本节我们就需要设置如下的模式</p>
                  <figure class="highlight lisp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glMatrixMode(<span class="name">GL_MODELVIEW</span>)<span class="comment">;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>接下来，我们需要设置</p>
                  <figure class="highlight abnf">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glLoadIdentity()<span class="comment">;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这个方法的作用是设置将当前的用户坐标系的原点移到了屏幕中心，类似于一个复位操作。 好，设置好以上两个条件之后我们就可以来进行变换啦。主要有以下三个函数：</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">gl<span class="constructor">Rotatef(<span class="params">angle</span>,<span class="params">vx</span>,<span class="params">vy</span>,<span class="params">vz</span>)</span> <span class="comment">//绕向量(vx,vy,vz)为轴旋转角度angle</span></span><br><span class="line">gl<span class="constructor">Translate(<span class="params">dx</span>,<span class="params">dy</span>,<span class="params">dz</span>)</span> <span class="comment">//平移，位移量为向量(dx,dy,dz)</span></span><br><span class="line">gl<span class="constructor">Scalef(<span class="params">sx</span>,<span class="params">sy</span>,<span class="params">sz</span>)</span> <span class="comment">//比例缩放，x，y，z 方向的缩放因子分别为sx，sy，sz</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>下面我们来详细说明这三个函数的用法。</p>
                  <h2 id="平移"><a href="#平移" class="headerlink" title="平移"></a>平移</h2>
                  <p>三种变换中，平移变换是最简单的。 类库中提供了下面两个方法：</p>
                  <blockquote>
                    <p>glTranslated(GLdouble x,GLdouble y,GLdouble z) glTranslatef(GLfloat x,GLfloat y,GLfloat z)</p>
                  </blockquote>
                  <p>这两种方法是基本是等价的，一种方法是传入double类型的参数，另一个是传入float类型的参数。 方法的作用是<strong>将物体分别沿x，y，z轴平移x，y，z的单位长度</strong>。 利用上一节的机器人我们来感受一下</p>
                  <h3 id="1-向右平移100像素"><a href="#1-向右平移100像素" class="headerlink" title="1.向右平移100像素"></a><strong>1.向右平移100像素</strong></h3>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glTranslated(<span class="number">100</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422142910.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422142910.jpg" alt="20150422142910"></a> 可以看到，机器人向右平移了100像素</p>
                  <h3 id="2-向左下分别平移50-50像素"><a href="#2-向左下分别平移50-50像素" class="headerlink" title="2.向左下分别平移50,50像素"></a><strong>2.向左下分别平移50,50像素</strong></h3>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glTranslated(<span class="number">-50</span>,<span class="number">-50</span>,<span class="number">0</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422143102.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422143102.jpg" alt="20150422143102"></a> 可以看到，机器人分别向左和向下平移了50像素</p>
                  <h3 id="3-向左下分别平移50-50，向前平移100"><a href="#3-向左下分别平移50-50，向前平移100" class="headerlink" title="3.向左下分别平移50,50，向前平移100"></a><strong>3.向左下分别平移50,50，向前平移100</strong></h3>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glTranslated(<span class="number">-50</span>,<span class="number">-50</span>,<span class="number">100</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422143102.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422143102.jpg" alt="20150422143102"></a> 哦，和上一个类似，也就是说在z轴上平移没有什么效果吗？难道因为我画的是二维平面图形？哦不，那不应该是距离我的视线更近了所以看到的更大了吗？好吧，事实好像不是这样的，我就姑且认为二维平面在z轴上的平移是没有影响的吧。 恩，这个函数基本用法就是这样，通过传入不同的x，y，z值实现平移即可。</p>
                  <h2 id="旋转"><a href="#旋转" class="headerlink" title="旋转"></a>旋转</h2>
                  <p>旋转的方法有下面两个：</p>
                  <blockquote>
                    <p>glRotatef(GLdouble angle,GLdouble x,GLdouble y,GLdouble z) glRotatef(GLfloat angle,GLfloat x,GLfloat y,GLfloat z)</p>
                  </blockquote>
                  <p>其中第一个参数是旋转的角度，后面三个参数 x,yz 参数确立了旋转轴，旋转轴是原点(0,0,0)与(x,y,z)的连线。 下面我们用几个例子来感受一下</p>
                  <h3 id="1-绕-x-轴旋转60度"><a href="#1-绕-x-轴旋转60度" class="headerlink" title="1.绕 x 轴旋转60度"></a><strong>1.绕 x 轴旋转60度</strong></h3>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glRotated(<span class="number">60</span>,<span class="number">10</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422144433.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422144433.jpg" alt="20150422144433"></a> 恩，它变扁了，旋转中心在机器人的中心，也就是中间的小红点，设想一下，绕x轴旋转60度，的确我们看到的应该就是变扁的机器人</p>
                  <h3 id="2-绕z轴旋转90度"><a href="#2-绕z轴旋转90度" class="headerlink" title="2.绕z轴旋转90度"></a>2.绕z轴旋转90度</h3>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glRotated(<span class="number">90</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">10</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p><a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422144851.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422144851.jpg" alt="20150422144851"></a> 可以看到，机器人绕中心点旋转了90度，是逆时针方向。</p>
                  <h3 id="3-旋转平移结合"><a href="#3-旋转平移结合" class="headerlink" title="3.旋转平移结合"></a>3.旋转平移结合</h3>
                  <p>感受完上面的两个例子之后，<strong>重头戏来了</strong>，上面的例子中旋转轴是(0,0,0)和(x,y,z)两点的连线，也就是旋转轴总是通过坐标原点的。 那如果我们要让物体绕特定的旋转轴来旋转，比如绕(1,2,3)和(4,5,6)来旋转怎么办？ 这里就要用到平移和旋转的组合了。</p>
                  <blockquote>
                    <p>如果旋转轴通过(xp,yp,zp)，而不通过坐标原点。假如旋转轴为(xp,yp,zp)和(xq,yq,zq)确立的。我们首先要将图形沿x,y,z方向分别平移-xp,-yp,-zp，然后旋转参数(x,y,z)分别传入(xq-xp,yq-yp,zq-zp)三个值，旋转完毕之后再把图形沿x,y,z方向分别平移xp,yp,zp个单位长度即可。</p>
                  </blockquote>
                  <p>在这里，<strong>我的教材和指导书中的内容又发生了冲突</strong>，教材中说的是先沿x,y,z方向分别平移<strong>-xp,-yp,-zp</strong>，再沿x,y,z方向分别平移<strong>xp,yp,zp</strong>还原。而指导书中则是先沿x,y,z方向分别平移<strong>xp,yp,zp</strong>，再沿x,y,z方向分别平移<strong>-xp,-yp,-zp</strong>还原，到底谁对谁错呢？我们来一个小例子验证一下。 如果觉得无聊，可以自行忽略下面小段内容。 为了直观地表示，我们统一设z坐标为0，在xy平面中观察变换过程。 假设我们有一个点(2,2,0)，旋转的轴我们设为(1,2,0)和(4,5,0)的连线，那么该点绕轴旋转180度之后应该会是(1,3,0)，从图上可以很直观地看出 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/111.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/111.png" alt="111"></a> 那么在调用类库的时候，我们首先就要对这个点进行平移，然后旋转，然后再反平移恢复。</p>
                  <blockquote>
                    <p>首先，我们按照第一种说法，即先沿x,y,z方向分别平移-xp,-yp,-zp，即(2,2,0)减去(1,2,0)，变为了(1,0,0)，然后传入(xq-xp,yq-yp,zq-zp)实现绕(0,0,0)与(xq-xp,yq-yp,zq-zp)两点连线为旋转轴来旋转180度，显然是绕(0,0,0)与(3,3,0)的连线来旋转的，这个点变为了(0,1,0)，然后再沿x,y,z方向分别平移xp,yp,zp还原，即加(1,2,0)，即加得到的结果是(1,3,0)。确实与图中点的符合，所以这一种说法验证正确。 另一种说法，即先沿x,y,z方向分别平移xp,yp,zp，即(2,2,0)加上(1,2,0)，变为了(3,4,0)，然后传入(xq-xp,yq-yp,zq-zp)实现绕(0,0,0)与(xq-xp,yq-yp,zq-zp)两点连线为旋转轴来旋转180度，显然是绕(0,0,0)与(3,3,0)的连线来旋转的，这个点变为了(4,3,0)，然后再沿x,y,z方向分别平移-xp,-yp,-zp还原，即减去(1,2,0)，即加得到的结果是(3,1,0)。与图中的点不符，所以这一种说法验证失败。</p>
                  </blockquote>
                  <p>可见，我们得到的结果是</p>
                  <blockquote>
                    <p>如果旋转轴通过(xp,yp,zp)，而不通过坐标原点。假如旋转轴为(xp,yp,zp)和(xq,yq,zq)确立的。我们首先要将图形沿x,y,z方向分别平移-xp,-yp,-zp，然后旋转参数(x,y,z)分别传入(xq-xp,yq-yp,zq-zp)三个值，旋转完毕之后再把图形沿x,y,z方向分别平移xp,yp,zp个单位长度即可。</p>
                  </blockquote>
                  <p>所以，我们要实现机器人绕两点(10,20,30)和(40,50,60)定义的轴线旋转45度，代码实现如下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glTranslatef(<span class="number">-10</span>,<span class="number">-20</span>,<span class="number">-30</span>);</span><br><span class="line"><span class="comment">//(40,50,60)-(10,20,30)=(30,30,30)</span></span><br><span class="line">glRotatef(<span class="number">45</span>,<span class="number">30</span>,<span class="number">30</span>,<span class="number">30</span>);</span><br><span class="line">glTranslatef(<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/0150422151947.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/0150422151947.jpg" alt="0150422151947"></a> 运行结果可能不太直观，可以直接参考代码实现</p>
                  <h2 id="缩放"><a href="#缩放" class="headerlink" title="缩放"></a>缩放</h2>
                  <p>对于缩放，我们的方法也是有两个</p>
                  <blockquote>
                    <p>glScaled(GLdouble x,GLdouble y,GLdouble z) glScalef(GLfloat x,GLfloat y,GLfloat z)</p>
                  </blockquote>
                  <p>区别也就是一个参数为double类型，一个为float类型 函数的作用是将物体分别在x,y,z轴方向缩放为x,y,z倍，缩放中心为原点 下面我们来几个小例子感受一下</p>
                  <h3 id="1-沿x轴放大2倍"><a href="#1-沿x轴放大2倍" class="headerlink" title="1.沿x轴放大2倍"></a>1.沿x轴放大2倍</h3>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glScaled(<span class="number">2</span>,<span class="number">1</span>,<span class="number">1</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422153045.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422153045.jpg" alt="20150422153045"></a> 画面好美！</p>
                  <h3 id="2-沿y轴z轴分别放大2倍"><a href="#2-沿y轴z轴分别放大2倍" class="headerlink" title="2.沿y轴z轴分别放大2倍"></a>2.沿y轴z轴分别放大2倍</h3>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glScaled(<span class="number">1</span>,<span class="number">2</span>,<span class="number">2</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422153914.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422153914.jpg" alt="20150422153914"></a> 因为整个图形是一个平面图，所以我们只可以看出z轴放缩的效果</p>
                  <h3 id="3-放缩和平移的变换"><a href="#3-放缩和平移的变换" class="headerlink" title="3.放缩和平移的变换"></a>3.放缩和平移的变换</h3>
                  <p>和旋转的原理一样，默认的放缩中心是原点，在这里，如果我们的放缩中心如果不是原点，我们该怎样设置呢？ 假设放缩中心为(xp,yp,zp)，方法如下：</p>
                  <blockquote>
                    <p>如果我们的放缩中心设置为(xp,yp,zp)，而不是坐标原点。我们首先要将图形沿x,y,z方向分别平移-xp,-yp,-zp，然后放缩参数(x,y,z)分别传入三个值代表放缩比例，放缩完毕之后再把图形沿x,y,z方向分别平移xp,yp,zp个单位长度还原。</p>
                  </blockquote>
                  <p>下面，我们以(50,50,50)为放缩中心来对机器人的xy方向分别放缩1.5倍</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glTranslated(<span class="number">-50</span>,<span class="number">-50</span>,<span class="number">0</span>);</span><br><span class="line">glScaled(<span class="number">1.5</span>,<span class="number">1.5</span>,<span class="number">0</span>);</span><br><span class="line">glTranslated(<span class="number">50</span>,<span class="number">50</span>,<span class="number">0</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422155459.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150422155459.jpg" alt="20150422155459"></a> 这样，我们就实现了以(50,50,0)为放缩原点来进行放大1.5倍的操作。</p>
                  <h2 id="综述-1"><a href="#综述-1" class="headerlink" title="综述"></a>综述</h2>
                  <p>在本篇我们描述了OpenGL中的平移旋转放缩变换操作，以及一些实例演示，希望对大家有帮助！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-22 14:19:04" itemprop="dateCreated datePublished" datetime="2015-04-22T14:19:04+08:00">2015-04-22</time>
                </span>
                <span id="/1658.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例五之平移缩放旋转" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>3.7k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>3 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1649.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1649.html" class="post-title-link" itemprop="url">OpenGL绘图实例四之区域颜色填充</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>上一节我们利用种子填充算法实现了机器人的区域填充，我们可以发现，种子填充需要一定是时间，并不能在第一时间填充完毕。这里我们介绍一种更加简单的方法，我们利用 glPolygonMode 来绘制机器人，感受一下。</p>
                  <h2 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h2>
                  <p>我们曾经分别使用过类库和直线圆弧生成算法来绘制过机器人的线条。 类库绘制法：<a href="http://cuiqingcai.com/1597.html">OpenGL绘图实例一之机器人的绘制</a> 算法绘制法：<a href="http://cuiqingcai.com/1613.html">OpenGL绘图实例二之直线和圆弧的绘制</a> 填充算法也有两种，一种是种子填充算法，另一种就是本篇说的方法。 在这里我们可以归一下类，算法绘制线条方法和种子填充算法中的每一个点都是我们一点点绘制的，都是我们利用算法一点点计算的坐标来绘制，因此，可以把他俩归为一对。而类库绘制线条方法和本篇说的填充方法都是指定一部分点，类库为我们实现了填充，因此可以把他俩归为一对。下面就让我们来感受一下类库填充的魅力吧！</p>
                  <h2 id="函数说明"><a href="#函数说明" class="headerlink" title="函数说明"></a>函数说明</h2>
                  <h3 id="1-函数原型"><a href="#1-函数原型" class="headerlink" title="1.函数原型"></a><strong>1.函数原型</strong></h3>
                  <p>函数原型：void glPolygonMode(GLenum face, GLenum mode); 说明：控制一个多边形的正面和背面的绘图模式。表示多边形应该被画成点、轮廓还是填充形式。在默认情况下，多边形的正面和背面都被画成填充形式。 函数glPolygonMode()用于改变当前的多边形绘制模式，它有两个参数。第一个参数指定哪些面将被这个调用，可能的值为GL_FRONT、GL_BACK 或GL_FRONT_AND_BACK，分别对应于前向多边形、后向多边形或两者。第二个参数指定将要使用的模式，可以为GL_POINT、GL_LINE 或GL_FILL。 下面我们来用一个小Demo来感受一下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);</span><br><span class="line">glBegin(GL_TRIANGLES);</span><br><span class="line">glVertex3f(‐<span class="number">0.8f</span>,<span class="number">0.0f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glVertex3f(‐<span class="number">0.6f</span>,<span class="number">0.0f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glVertex3f(‐<span class="number">0.7f</span>,<span class="number">0.2f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glEnd();</span><br><span class="line">glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);</span><br><span class="line">glBegin(GL_TRIANGLES);</span><br><span class="line">glVertex3f(<span class="number">0.1f</span>,<span class="number">0.0f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glVertex3f(‐<span class="number">0.1f</span>,<span class="number">0.0f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glVertex3f(<span class="number">0.0f</span>,<span class="number">0.2f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glEnd();</span><br><span class="line">glPolygonMode(GL_FRONT_AND_BACK, GL_POINT);</span><br><span class="line">glBegin(GL_TRIANGLES);</span><br><span class="line">glVertex3f(<span class="number">0.6f</span>,<span class="number">0.0f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glVertex3f(<span class="number">0.8f</span>,<span class="number">0.0f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glVertex3f(<span class="number">0.7f</span>,<span class="number">0.2f</span>,<span class="number">0.0f</span>);</span><br><span class="line">glEnd();</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上三种模式分别是绘制了填充的三角形，三角形的边界，三角形的三个点。</p>
                  <h3 id="2-画多边形"><a href="#2-画多边形" class="headerlink" title="2.画多边形"></a>2.画多边形</h3>
                  <p>在glBegin的参数传入GL_POLYGON，绘制的时候所有的点就会连接而成一个多边形。</p>
                  <h3 id="3-线条的粗细"><a href="#3-线条的粗细" class="headerlink" title="3.线条的粗细"></a>3.线条的粗细</h3>
                  <figure class="highlight lisp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glLineWidth(<span class="name">lineWidth</span>)<span class="comment">;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>利用这个方法，我们可以传入像素值大小，比如传入2，画线的时候就是2像素的粗细。</p>
                  <h2 id="绘制机器人"><a href="#绘制机器人" class="headerlink" title="绘制机器人"></a>绘制机器人</h2>
                  <p>接下来我们利用这个方法来绘制机器人吧！我们可以注意到，定义了glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)之后， 如果glBegin传入的是GL_LINE_LOOP，绘制的仍然是封闭的曲线，如果glBegin传入的是GL_POLYGON，绘制的则是封闭的填充的图形。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/图片1.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/图片1.png" alt="图片1"></a> 如果要实现上图的机器人，我们既要绘制黑色的边线，又要绘制带颜色的区块。所以我们就需要分别调用两种绘制模式，绘制的过程是完全相同的。所以，我们可以把模式当做一个变量来传入参数中改变绘制模式。比如之前的绘制三角形的方法</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画三角形，传入三个点的坐标</span></span><br><span class="line">void gl<span class="constructor">Tri(<span class="params">int</span> <span class="params">x1</span>,<span class="params">int</span> <span class="params">y1</span>,<span class="params">int</span> <span class="params">x2</span>,<span class="params">int</span> <span class="params">y2</span>,<span class="params">int</span> <span class="params">x3</span>,<span class="params">int</span> <span class="params">y3</span>)</span>&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    gl<span class="constructor">Begin(GL_LINE_LOOP)</span>;</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	gl<span class="constructor">Vertex2d(<span class="params">x1</span>,<span class="params">y1</span>)</span>;</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	gl<span class="constructor">Vertex2d(<span class="params">x2</span>,<span class="params">y2</span>)</span>;</span><br><span class="line">	<span class="comment">//三点</span></span><br><span class="line">	gl<span class="constructor">Vertex2d(<span class="params">x3</span>,<span class="params">y3</span>)</span>;</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	gl<span class="constructor">End()</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>就可以改写为</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画三角形，传入三个点的坐标</span></span><br><span class="line">void gl<span class="constructor">Tri(<span class="params">int</span> <span class="params">x1</span>,<span class="params">int</span> <span class="params">y1</span>,<span class="params">int</span> <span class="params">x2</span>,<span class="params">int</span> <span class="params">y2</span>,<span class="params">int</span> <span class="params">x3</span>,<span class="params">int</span> <span class="params">y3</span>,<span class="params">int</span> MODE)</span>&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    gl<span class="constructor">Begin(MODE)</span>;</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	gl<span class="constructor">Vertex2d(<span class="params">x1</span>,<span class="params">y1</span>)</span>;</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	gl<span class="constructor">Vertex2d(<span class="params">x2</span>,<span class="params">y2</span>)</span>;</span><br><span class="line">	<span class="comment">//三点</span></span><br><span class="line">	gl<span class="constructor">Vertex2d(<span class="params">x3</span>,<span class="params">y3</span>)</span>;</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	gl<span class="constructor">End()</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在调用的时候我们只需要分别传入GL_LINE_LOOP和GL_POLYGON就可以了。 所有之前的方法改写如下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画矩形，传入的是左下角XY坐标和右上角XY坐标</span></span><br><span class="line"><span class="built_in">void</span> glRect(<span class="built_in">int</span> leftX,<span class="built_in">int</span> leftY,<span class="built_in">int</span> rightX,<span class="built_in">int</span> rightY,<span class="built_in">int</span> MODE)&#123;</span><br><span class="line">	<span class="comment">//画封闭曲线</span></span><br><span class="line">    glBegin(MODE);</span><br><span class="line">	<span class="comment">//左下角</span></span><br><span class="line">	glVertex2d(leftX,leftY);</span><br><span class="line">	<span class="comment">//右下角</span></span><br><span class="line">	glVertex2d(rightX,leftY);</span><br><span class="line">	<span class="comment">//右上角</span></span><br><span class="line">	glVertex2d(rightX,rightY);</span><br><span class="line">	<span class="comment">//左上角</span></span><br><span class="line">	glVertex2d(leftX,rightY);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画圆角矩形，传入矩形宽高，角半径，矩形中心点坐标</span></span><br><span class="line"><span class="built_in">void</span> glRoundRec(<span class="built_in">int</span> centerX,<span class="built_in">int</span> centerY,<span class="built_in">int</span> width,<span class="built_in">int</span> height,<span class="built_in">float</span> cirR,<span class="built_in">int</span> MODE)&#123;</span><br><span class="line">	<span class="comment">//二分之PI，一个象限的角度</span></span><br><span class="line">	<span class="built_in">float</span> PI_HALF = PI/<span class="number">2</span>;</span><br><span class="line">	<span class="comment">//划分程度,值越大画得越精细</span></span><br><span class="line">	<span class="built_in">float</span> divide=<span class="number">20.0</span>;</span><br><span class="line">	<span class="comment">//圆角矩形的坐标</span></span><br><span class="line">    <span class="built_in">float</span> tx,ty; </span><br><span class="line">	<span class="comment">//画封闭曲线</span></span><br><span class="line">    glBegin(MODE);</span><br><span class="line">	<span class="comment">//四个象限不同的操作符</span></span><br><span class="line">    <span class="built_in">int</span> opX[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>,<span class="number">1</span>&#125;;</span><br><span class="line">    <span class="built_in">int</span> opY[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>&#125;;</span><br><span class="line">	<span class="comment">//用来计数，从第一象限到第四象限</span></span><br><span class="line">    <span class="built_in">float</span> x=<span class="number">0</span>;</span><br><span class="line">	<span class="comment">//x自增时加的值</span></span><br><span class="line">	<span class="built_in">float</span> part=<span class="number">1</span>/divide;</span><br><span class="line">	<span class="comment">//计算内矩形宽高一半的数值</span></span><br><span class="line">	<span class="built_in">int</span> w=width/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="built_in">int</span> h=height/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="comment">//循环画线</span></span><br><span class="line">    <span class="keyword">for</span>(x=<span class="number">0</span>;x&lt;<span class="number">4</span>;x+=part)&#123;</span><br><span class="line">		<span class="comment">//求出弧度</span></span><br><span class="line">		<span class="built_in">float</span> rad = PI_HALF*x;</span><br><span class="line">		<span class="comment">//计算坐标值</span></span><br><span class="line">	    tx=cirR*cos(rad)+opX[(<span class="built_in">int</span>)x]*w+centerX;</span><br><span class="line">	    ty=cirR*sin(rad)+opY[(<span class="built_in">int</span>)x]*h+centerY;</span><br><span class="line">		<span class="comment">//传入坐标画线</span></span><br><span class="line">	    glVertex2f(tx,ty);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">   glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画弧线，相对偏移量XY，开始的弧度，结束的弧度，半径</span></span><br><span class="line"><span class="built_in">void</span> glArc(<span class="built_in">double</span> x,<span class="built_in">double</span> y,<span class="built_in">double</span> start_angle,<span class="built_in">double</span> end_angle,<span class="built_in">double</span> radius,<span class="built_in">int</span> MODE)</span><br><span class="line">&#123;   </span><br><span class="line">	<span class="comment">//开始绘制曲线</span></span><br><span class="line">	glBegin(MODE);</span><br><span class="line">	<span class="comment">//每次画增加的弧度</span></span><br><span class="line">	<span class="built_in">double</span> delta_angle=PI/<span class="number">180</span>;</span><br><span class="line">	<span class="comment">//画圆弧</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="built_in">double</span> i=start_angle;i&lt;=end_angle;i+=delta_angle)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//绝对定位加三角函数值</span></span><br><span class="line">		<span class="built_in">double</span> vx=x+radius * cos(i);</span><br><span class="line">		<span class="built_in">double</span> vy=y+radius*sin(i);</span><br><span class="line">		glVertex2d(vx,vy);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束绘画</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//画圆</span></span><br><span class="line"><span class="built_in">void</span> glCircle(<span class="built_in">double</span> x, <span class="built_in">double</span> y, <span class="built_in">double</span> radius,<span class="built_in">int</span> MODE)  </span><br><span class="line">&#123;  </span><br><span class="line">	<span class="comment">//画全圆</span></span><br><span class="line">    glArc(x,y,<span class="number">0</span>,<span class="number">2</span>*PI,radius,MODE);  </span><br><span class="line">&#125;  </span><br><span class="line"></span><br><span class="line"><span class="comment">//画三角形，传入三个点的坐标</span></span><br><span class="line"><span class="built_in">void</span> glTri(<span class="built_in">int</span> x1,<span class="built_in">int</span> y1,<span class="built_in">int</span> x2,<span class="built_in">int</span> y2,<span class="built_in">int</span> x3,<span class="built_in">int</span> y3,<span class="built_in">int</span> MODE)&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    glBegin(MODE);</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	glVertex2d(x1,y1);</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	glVertex2d(x2,y2);</span><br><span class="line">	<span class="comment">//三点</span></span><br><span class="line">	glVertex2d(x3,y3);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画线，传入两点坐标</span></span><br><span class="line"><span class="built_in">void</span> glLine(<span class="built_in">int</span> x1,<span class="built_in">int</span> y1,<span class="built_in">int</span> x2,<span class="built_in">int</span> y2)&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    glBegin(GL_LINE_STRIP);</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	glVertex2d(x1,y1);</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	glVertex2d(x2,y2);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>那么我们实现了上面的方法之后。比如我现在要画一个矩形，就要传入GL_LINE_LOOP绘制一个边缘，然后再传入GL_POLYGON绘制一个填充的矩形，其中这个矩形的长宽等于边缘的长宽减去线的宽度（经过探索发现，应该减去线宽的一半才对，因为线的基准点是在线宽的中心的） 所以，我们可以定义一个画带边矩形的方法，比如</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画填充的矩形，传入左上角和右下角的坐标</span></span><br><span class="line">void gl<span class="constructor">FillRect(<span class="params">int</span> <span class="params">leftX</span>,<span class="params">int</span> <span class="params">leftY</span>,<span class="params">int</span> <span class="params">rightX</span>,<span class="params">int</span> <span class="params">rightY</span>,<span class="params">int</span> <span class="params">color</span>[3])</span>&#123;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">border</span>[0],<span class="params">border</span>[1],<span class="params">border</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">Rect(<span class="params">leftX</span>,<span class="params">leftY</span>,<span class="params">rightX</span>,<span class="params">rightY</span>,GL_LINE_LOOP)</span>;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">color</span>[0],<span class="params">color</span>[1],<span class="params">color</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">Rect(<span class="params">leftX</span>+<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">leftY</span>-<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">rightX</span>-<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">rightY</span>+<span class="params">lineWidth</span><span class="operator">/</span>2,GL_POLYGON)</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们先定义了边界颜色绘制了边界，然后定义了图形的颜色来绘制填充的图形。其中color作为参数，可以传入不同的RGB值。 定义颜色RGB数组即可</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="built_in">int</span> border[<span class="number">3</span>]=&#123;<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>&#125;;</span><br><span class="line"><span class="built_in">int</span> grey[<span class="number">3</span>]=&#123;<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>&#125;;</span><br><span class="line"><span class="built_in">int</span> yellow[<span class="number">3</span>]=&#123;<span class="number">255</span>,<span class="number">243</span>,<span class="number">0</span>&#125;;</span><br><span class="line"><span class="built_in">int</span> red[<span class="number">3</span>]=&#123;<span class="number">237</span>,<span class="number">28</span>,<span class="number">36</span>&#125;;</span><br><span class="line"><span class="built_in">int</span> darkGrey[<span class="number">3</span>]=&#123;<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>&#125;;</span><br><span class="line"><span class="built_in">int</span> white[<span class="number">3</span>]=&#123;<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>调用的时候我们只需要</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glFillRect(<span class="number">-108</span>,<span class="number">45</span>,<span class="number">-81</span>,<span class="number">0</span>,darkGrey);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>就可以绘制一个黑色边界的矩形了，填充色为暗灰色。 其他类似的方法实现如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画填充的三角形，传值为逆时针，此法针对于机器人的正三角形</span></span><br><span class="line">void gl<span class="constructor">FillTri(<span class="params">int</span> <span class="params">x1</span>,<span class="params">int</span> <span class="params">y1</span>,<span class="params">int</span> <span class="params">x2</span>,<span class="params">int</span> <span class="params">y2</span>,<span class="params">int</span> <span class="params">x3</span>,<span class="params">int</span> <span class="params">y3</span>,<span class="params">int</span> <span class="params">color</span>[3])</span>&#123;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">border</span>[0],<span class="params">border</span>[1],<span class="params">border</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">Tri(<span class="params">x1</span>,<span class="params">y1</span>,<span class="params">x2</span>,<span class="params">y2</span>,<span class="params">x3</span>,<span class="params">y3</span>,GL_LINE_LOOP)</span>;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">color</span>[0],<span class="params">color</span>[1],<span class="params">color</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">Tri(<span class="params">x1</span>+<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">y1</span>+<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">x2</span>-<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">y2</span>+<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">x3</span>,<span class="params">y3</span>-<span class="params">lineWidth</span><span class="operator">/</span>2,GL_POLYGON)</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画填充的圆角矩形</span></span><br><span class="line">void gl<span class="constructor">FillRoundRec(<span class="params">int</span> <span class="params">centerX</span>,<span class="params">int</span> <span class="params">centerY</span>,<span class="params">int</span> <span class="params">width</span>,<span class="params">int</span> <span class="params">height</span>,<span class="params">float</span> <span class="params">cirR</span>,<span class="params">int</span> <span class="params">color</span>[3])</span>&#123;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">border</span>[0],<span class="params">border</span>[1],<span class="params">border</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">RoundRec(<span class="params">centerX</span>,<span class="params">centerY</span>,<span class="params">width</span>,<span class="params">height</span>,<span class="params">cirR</span>,GL_LINE_LOOP)</span>;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">color</span>[0],<span class="params">color</span>[1],<span class="params">color</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">RoundRec(<span class="params">centerX</span>,<span class="params">centerY</span>,<span class="params">width</span>-<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">height</span>-<span class="params">lineWidth</span><span class="operator">/</span>2,<span class="params">cirR</span>,GL_POLYGON)</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画填充的圆形</span></span><br><span class="line">void gl<span class="constructor">FillCircle(<span class="params">double</span> <span class="params">x</span>, <span class="params">double</span> <span class="params">y</span>, <span class="params">double</span> <span class="params">radius</span>,<span class="params">int</span> <span class="params">color</span>[3])</span>&#123;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">border</span>[0],<span class="params">border</span>[1],<span class="params">border</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">Circle(<span class="params">x</span>,<span class="params">y</span>,<span class="params">radius</span>,GL_LINE_LOOP)</span>;</span><br><span class="line">	gl<span class="constructor">Color3ub(<span class="params">color</span>[0],<span class="params">color</span>[1],<span class="params">color</span>[2])</span>;</span><br><span class="line">	gl<span class="constructor">Circle(<span class="params">x</span>,<span class="params">y</span>,<span class="params">radius</span>-<span class="params">lineWidth</span><span class="operator">/</span>2,GL_POLYGON)</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>恩，万事俱备只欠东风了，下面我们调用一下这几个函数直接进行绘制就好啦。 display中的绘图调用如下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//函数用来画图</span></span><br><span class="line"><span class="built_in">void</span> display(<span class="built_in">void</span>)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">//GL_COLOR_BUFFER_BIT表示清除颜色</span></span><br><span class="line">	glClear(GL_COLOR_BUFFER_BIT);</span><br><span class="line">	glLineWidth(lineWidth);</span><br><span class="line"></span><br><span class="line">	<span class="comment">//设置画线颜色</span></span><br><span class="line">    glColor3ub(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line">	glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);</span><br><span class="line">	<span class="comment">//画圆角矩形，大脸</span></span><br><span class="line">	glFillRoundRec(<span class="number">0</span>,<span class="number">113</span>,<span class="number">128</span>,<span class="number">74</span>,<span class="number">10</span>,grey);</span><br><span class="line">	<span class="comment">//两个眼睛</span></span><br><span class="line">	glFillCircle(<span class="number">-30</span>,<span class="number">111</span>,<span class="number">10</span>,white);</span><br><span class="line">	glFillCircle(<span class="number">30</span>,<span class="number">111</span>,<span class="number">10</span>,white);</span><br><span class="line">	<span class="comment">//黑色线</span></span><br><span class="line">	glColor3ub(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line">	<span class="comment">//两条天线</span></span><br><span class="line">	glLine(<span class="number">-35</span>,<span class="number">150</span>,<span class="number">-35</span>,<span class="number">173</span>);</span><br><span class="line">	glLine(<span class="number">35</span>,<span class="number">150</span>,<span class="number">35</span>,<span class="number">173</span>);</span><br><span class="line">	<span class="comment">//圆弧，画嘴</span></span><br><span class="line">	glArc(<span class="number">0</span>,<span class="number">133</span>,<span class="number">11</span>*PI/<span class="number">8</span>,<span class="number">13</span>*PI/<span class="number">8</span>,<span class="number">45</span>,GL_LINE_STRIP);</span><br><span class="line">	<span class="comment">//画矩形，脖子</span></span><br><span class="line">	glFillRect(<span class="number">-25</span>,<span class="number">76</span>,<span class="number">25</span>,<span class="number">60</span>,grey);</span><br><span class="line">	<span class="comment">//圆角矩形，两个耳朵</span></span><br><span class="line">	glFillRoundRec(<span class="number">81</span>,<span class="number">115</span>,<span class="number">20</span>,<span class="number">34</span>,<span class="number">5</span>,darkGrey);</span><br><span class="line">	glFillRoundRec(<span class="number">-81</span>,<span class="number">115</span>,<span class="number">20</span>,<span class="number">34</span>,<span class="number">5</span>,darkGrey);</span><br><span class="line">	<span class="comment">//画圆角矩形，大肚子</span></span><br><span class="line">	glFillRoundRec(<span class="number">0</span>,<span class="number">0</span>,<span class="number">146</span>,<span class="number">120</span>,<span class="number">15</span>,grey);</span><br><span class="line">	<span class="comment">//画三角，肚子里的三角</span></span><br><span class="line">	glFillTri(<span class="number">-30</span>,<span class="number">-15</span>,<span class="number">30</span>,<span class="number">-15</span>,<span class="number">0</span>,<span class="number">28</span>,yellow);</span><br><span class="line">	<span class="comment">//画圆，中间小圈</span></span><br><span class="line">	glFillCircle(<span class="number">0</span>,<span class="number">0</span>,<span class="number">10</span>,red);</span><br><span class="line">	<span class="comment">//画矩形，胳膊连接处</span></span><br><span class="line">	glFillRect(<span class="number">-81</span>,<span class="number">43</span>,<span class="number">-73</span>,<span class="number">25</span>,grey);</span><br><span class="line">	glFillRect(<span class="number">73</span>,<span class="number">43</span>,<span class="number">81</span>,<span class="number">25</span>,grey);</span><br><span class="line">	<span class="comment">//画矩形，上臂</span></span><br><span class="line">	glFillRect(<span class="number">-108</span>,<span class="number">45</span>,<span class="number">-81</span>,<span class="number">0</span>,darkGrey);</span><br><span class="line">	glFillRect(<span class="number">81</span>,<span class="number">45</span>,<span class="number">108</span>,<span class="number">0</span>,darkGrey);</span><br><span class="line">	<span class="comment">//画矩形，中臂</span></span><br><span class="line">	glFillRect(<span class="number">-101</span>,<span class="number">0</span>,<span class="number">-88</span>,<span class="number">-4</span>,grey);</span><br><span class="line">	glFillRect(<span class="number">88</span>,<span class="number">0</span>,<span class="number">101</span>,<span class="number">-4</span>,grey);</span><br><span class="line">	<span class="comment">//画矩形，下臂</span></span><br><span class="line">	glFillRect(<span class="number">-108</span>,<span class="number">-4</span>,<span class="number">-81</span>,<span class="number">-37</span>,darkGrey);</span><br><span class="line">	glFillRect(<span class="number">81</span>,<span class="number">-4</span>,<span class="number">108</span>,<span class="number">-37</span>,darkGrey);</span><br><span class="line">	<span class="comment">//画圆形，手掌</span></span><br><span class="line">	glFillCircle(<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">10</span>,grey);</span><br><span class="line">	glFillCircle(<span class="number">95</span>,<span class="number">-47</span>,<span class="number">10</span>,grey);</span><br><span class="line">	<span class="comment">//画腿连接处</span></span><br><span class="line">	glFillRect(<span class="number">-41</span>,<span class="number">-62</span>,<span class="number">-21</span>,<span class="number">-66</span>,grey);</span><br><span class="line">	glFillRect(<span class="number">21</span>,<span class="number">-62</span>,<span class="number">41</span>,<span class="number">-66</span>,grey);</span><br><span class="line">	<span class="comment">//画圆角矩形，大长腿</span></span><br><span class="line">	glFillRoundRec(<span class="number">-32</span>,<span class="number">-92</span>,<span class="number">38</span>,<span class="number">52</span>,<span class="number">10</span>,darkGrey);</span><br><span class="line">	glFillRoundRec(<span class="number">32</span>,<span class="number">-92</span>,<span class="number">38</span>,<span class="number">52</span>,<span class="number">10</span>,darkGrey);</span><br><span class="line">	<span class="comment">//画矩形，脚踝</span></span><br><span class="line">	glFillRect(<span class="number">-41</span>,<span class="number">-117</span>,<span class="number">-21</span>,<span class="number">-125</span>,grey);</span><br><span class="line">	glFillRect(<span class="number">21</span>,<span class="number">-117</span>,<span class="number">41</span>,<span class="number">-125</span>,grey);</span><br><span class="line">	<span class="comment">//画矩形，大脚掌</span></span><br><span class="line">	glFillRect(<span class="number">-59</span>,<span class="number">-125</span>,<span class="number">-8</span>,<span class="number">-137</span>,darkGrey);</span><br><span class="line">	glFillRect(<span class="number">8</span>,<span class="number">-125</span>,<span class="number">59</span>,<span class="number">-137</span>,darkGrey);</span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>恩，这样就大功告成啦，是不是比种子填充算法简单多了？</p>
                  <h2 id="运行结果"><a href="#运行结果" class="headerlink" title="运行结果"></a>运行结果</h2>
                  <p><a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/QQ截图20150421000536.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/QQ截图20150421000536.jpg" alt="QQ截图20150421000536"></a> 恩，那些小白点就忽略吧！！这叫不拘小节！！哈哈哈！！</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>本节我们利用了类库的方法来实现了颜色填充，是不是很简单？</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-20 23:56:51" itemprop="dateCreated datePublished" datetime="2015-04-20T23:56:51+08:00">2015-04-20</time>
                </span>
                <span id="/1649.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例四之区域颜色填充" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>7.2k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>7 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1640.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1640.html" class="post-title-link" itemprop="url">OpenGL绘图实例三之种子填充算法</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>博主研究了一下午加一晚上，终于把种子填充算法实现出来并把机器人填充完毕，路途很艰辛，不过也学到了很多，在此和大家一起分享。</p>
                  <h2 id="吐槽"><a href="#吐槽" class="headerlink" title="吐槽"></a>吐槽</h2>
                  <p>与我不是同学的小伙伴，请自动忽略，我是来吐槽教材的。 在此不得不吐槽一下，不得不说教材实在太坑爹了。对于种子填充算法的后半部分，下一个种子点的寻找过程中，从while(x&lt;=xright)开始，我实在无法搞懂它里面的神逻辑，最初我认为它是对的，后来按照它的思路实现之后，填充基本上是错误的，比如圆角矩形下方的部分，它就无法正常填充。根本原因还是它的下一步种子点找错了，而博主依然在固执地DeBug，看看是不是我哪里编码有问题。后来，干脆放弃了书上的逻辑了，自己改写了搜寻下一个种子点的算法，最后终于成功。 另外，教材上的这些伪代码写得也是太伪，算了，这不是重点，言归正传。</p>
                  <h2 id="基本梳理"><a href="#基本梳理" class="headerlink" title="基本梳理"></a>基本梳理</h2>
                  <p>在博主的研究过程中，遇到了许许多多的小问题，在这里统一做一下总结，也希望大家少走弯路，吸取我的经验教训。</p>
                  <h3 id="1-点的定义"><a href="#1-点的定义" class="headerlink" title="1.点的定义"></a>1.点的定义</h3>
                  <p>在这里我们避免不了要使用点，一个点包括了2个元素，一个是横坐标一个是纵坐标，所以我们可以直接把它定义为一个结构体。</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">Point</span></span></span><br><span class="line"><span class="class">&#123;</span></span><br><span class="line">	<span class="keyword">int</span> x;</span><br><span class="line">	<span class="keyword">int</span> y;</span><br><span class="line">&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这样的话，我们就可以直接声明一个 Point 类型的变量使用了，既方便又直观。</p>
                  <h3 id="2-栈的使用"><a href="#2-栈的使用" class="headerlink" title="2.栈的使用"></a>2.栈的使用</h3>
                  <p>对于种子填充算法，肯定避免不了使用栈的，在这里博主分享一下一些使用心得。 <strong>栈的引入</strong> C++代码中，可以直接用下面的代码来导入</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;stack&gt;</span></span></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> <span class="built_in">std</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>注意，这里一定记得加上 using namespace std 这句话，否则会出现 stack 未定义的错误，哈哈哈，深有体会。 <strong>栈的定义</strong> 引入了栈之后，我们就可以直接来声明一个栈了</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="built_in">stack</span>&lt;Point&gt; pixelStack;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>其中，需要加一个尖括号，尖括号中声明了 Point 类型，这样我们就可以使用它了 <strong>取栈顶元素</strong> C++中取栈顶元素是很坑的，有一个top方法，还有一个pop方法。 其中top方法是只取得栈顶的元素而不移除它，pop方法是直接移除栈顶元素，没有返回值。 所以我们要想取出栈顶元素并移除的话，就要分别调用这两个方法</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//获取最顶端的元素</span></span><br><span class="line"><span class="built_in">Point</span> tempPoint=pixelStack.top();</span><br><span class="line"><span class="comment">//删除最顶端的元素</span></span><br><span class="line">pixelStack.pop();</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>是不是不友好？不友好的话，那就自己去定义一个新方法吧，我就先不这么干啦。 <strong>判断栈非空</strong> 判断当前的栈是否已经为空，只需要调用empty方法就可以了</p>
                  <figure class="highlight stylus">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="function"><span class="title">while</span><span class="params">(!pixelStack.empty()</span></span>)&#123;</span><br><span class="line"><span class="comment">//code</span></span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这里是一个while循环，如果栈为非空的话不断循环。 <strong>关于栈置空</strong> 教材中的种子填充算法中用到了栈置空，不过我感觉没有必要这么做，因为在方法最前面是新声明的栈变量，它一定是空的。不过如果非要置空的话，可以利用下面的代码</p>
                  <figure class="highlight gcode">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">while</span><span class="comment">(!pixelStack.empty()</span>)&#123;</span><br><span class="line">    pixelStack.pop<span class="comment">()</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>如果栈不为空，就一直取元素，就可以把它置空啦。</p>
                  <h3 id="3-关于glColor3b和glColor3ub"><a href="#3-关于glColor3b和glColor3ub" class="headerlink" title="3.关于glColor3b和glColor3ub"></a>3.关于glColor3b和glColor3ub</h3>
                  <p>这的确也是坑得博主不浅，之前一直在用 glColor3b 这个方法来定义颜色，奇怪的是 glColor3b(255,0,0) 竟然不是红色，而是黑色！就是因为这个颜色问题，导致我在比对颜色的过程中走了很多弯路。在这里做一下说明 glColor3b()需要传入的是byte类型，它的数值范围是-128-127，也就是有符号数，我传入255，由于越界了，255这个数就相当于-128，难怪不变红啊。 glColor3ub()需要传入的是unsigned byte类型，范围是0-255，无符号数，那么在这里我们传入255,0,0这三个数，就变成红色了。</p>
                  <h3 id="4-取得某像素颜色"><a href="#4-取得某像素颜色" class="headerlink" title="4.取得某像素颜色"></a>4.取得某像素颜色</h3>
                  <p>我想说的是，这也是个深坑啊，一下午的Debug全归它身上了。 获取某个像素的这个函数是</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">void gl<span class="constructor">ReadPixels(GLint <span class="params">x</span>,GLint <span class="params">y</span>,GLsizesi <span class="params">width</span>,GLsizei <span class="params">height</span>,GLenum <span class="params">format</span>,GLenum <span class="params">type</span>,GLvoid <span class="operator">*</span><span class="params">pixel</span>)</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>函数说明如下：</p>
                  <blockquote>
                    <p>该函数总共有七个参数。前四个参数可以得到一个矩形，该矩形所包括的像素都会被读取出来。（第一、二个参数表示了矩形的左下角横、纵坐标，坐标以窗口最左下角为零，最右上角为最大值；第三、四个参数表示了矩形的宽度和高度） 第五个参数表示读取的内容，例如：GL_RGB就会依次读取像素的红、绿、蓝三种数据，GL_RGBA则会依次读取像素的红、绿、蓝、alpha四种数据，GL_RED则只读取像素的红色数据（类似的还有GL_GREEN，GL_BLUE，以及GL_ALPHA）。如果采用的不是RGBA颜色模式，而是采用颜色索引模式，则也可以使用GL_COLOR_INDEX来读取像素的颜色索引。目前仅需要知道这些，但实际上还可以读取其它内容，例如深度缓冲区的深度数据等。 第六个参数表示读取的内容保存到内存时所使用的格式，例如：GL_UNSIGNED_BYTE会把各种数据保存为GLubyte，GL_FLOAT会把各种数据保存为GLfloat等。 第七个参数表示一个指针，像素数据被读取后，将被保存到这个指针所表示的地址。注意，需要保证该地址有足够的可以使用的空间，以容纳读取的像素数据。例如一幅大小为256*256的图象，如果读取其RGB数据，且每一数据被保存为GLubyte。</p>
                  </blockquote>
                  <p>好了，那么重点来了，这个方法的坐标基准点是在画布的左下角！！而我们绘图的基准点是在画布的正中心！！所以我在获取某个点的颜色的时候一直都是错误的结果，这样的话在使用的时候我们的xy坐标值就要加上画布宽高的一半才能正常获取到像素的颜色，希望大家一定注意！！ 那么我们如何来使用呢？实例如下，首先定义GLByte的数组</p>
                  <figure class="highlight abnf">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">GLubyte iPixel[<span class="number">3</span>]<span class="comment">;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>另外还有画布的宽度高度的一半变量</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="built_in">int</span> halfWidth,halfHeight;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们可以调用如下的方法来获取(x,y)这个点像素的值</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfHeight</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在这里第五个参数我们定义了 GL_RGB，第六个参数我们定义了 GL_UNSIGNED_BYTE，最后是传入了数组的引用。 所以在调用这个方法之后，iPixel数组里面的三个值就已经赋值为了该点的RGB值，可以拿来做下一步的判断。 比如我们边界可以定义为</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">GLubyte oldColor[<span class="number">3</span>]=&#123;<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>&#125;;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在比较的时候就可以用下面的判别式</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">iPixel[<span class="number">0</span>]!=borderColor[<span class="number">0</span>]&amp;&amp;iPixel[<span class="number">1</span>]!=borderColor[<span class="number">1</span>]&amp;&amp;iPixel[<span class="number">2</span>]!=borderColor[<span class="number">2</span>]</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这里我们是依次比较了三个RGB值是否与边界的RGB值相等，不过，有意思的是，识别颜色的这个方法，黑色的RGB值会识别成1,1,1，而有时候在我调试的时候会识别为0,1,1。我在想是不是系统计算误差问题，如果真是的话，因为这个小小的误差就影响了我们的判别条件岂不是亏大了？那么在这里我就定义了一个方法，允许一定的误差，这个误差姑且就称为PS里面的容差吧。</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//传入两个颜色的RGB值，比较是否相同，容差为dis</span></span><br><span class="line"><span class="built_in">bool</span> same<span class="constructor">Color(<span class="params">int</span> <span class="params">r1</span>,<span class="params">int</span> <span class="params">g1</span>,<span class="params">int</span> <span class="params">b1</span>,<span class="params">int</span> <span class="params">r2</span>,<span class="params">int</span> <span class="params">g2</span>,<span class="params">int</span> <span class="params">b2</span>)</span>&#123;</span><br><span class="line">	<span class="comment">//容差度</span></span><br><span class="line">	<span class="built_in">int</span> dis = <span class="number">10</span>;</span><br><span class="line">	<span class="keyword">if</span>(abs(r1-r2)&lt;=dis&amp;&amp;abs(g1-g2)&lt;=dis&amp;&amp;abs(b1-b2)&lt;=dis)&#123;</span><br><span class="line">		return <span class="literal">true</span>;</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		return <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>那么我们的判定条件就改为了</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">!same<span class="constructor">Color(<span class="params">iPixel</span>[0],<span class="params">iPixel</span>[1],<span class="params">iPixel</span>[2],<span class="params">borderColor</span>[0],<span class="params">borderColor</span>[1],<span class="params">borderColor</span>[2])</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这样系统误差便不会影响了。</p>
                  <h3 id="5-下一个种子点的选取"><a href="#5-下一个种子点的选取" class="headerlink" title="5.下一个种子点的选取"></a>5.下一个种子点的选取</h3>
                  <p>教材上的种子点选取算法有点搞不懂，我按照上面的思路实现出来，在填充的时候出现了一系列问题。后来干脆放弃了教材中的方法，自己改写了一下。 思路大体上是这样的。</p>
                  <blockquote>
                    <p>在填充完一行后，这一行最左边的像素点我们定义为(xLeft,y)，最右边的像素我们定义为(xRight,y)，扫描上一行找寻下一个种子点，这里y就要增加1，如果(xRight,y+1)这个点不是边界不是已经填充的点，那么这个点就可以作为种子点压入堆栈。如果这个点是边界或者是已经填充的点，那么就继续往左搜索，如果找到既不是边界又未填充的点，那么这个点就是种子点，压入堆栈。如果一直往左找到xLeft还是没有找到的话，就不存在下一个种子点了。下一行扫描线也是同样的原理，y要在这个基础上减去2即可。</p>
                  </blockquote>
                  <p>恩，不知道大家有没有看懂，这是我自己想出来的方法，<strong>不敢保证完全正确，在此仅供参考</strong>。 如果大家真的可以按照教材中的方法实现成功的话，希望告诉我一下，感激不尽。</p>
                  <h2 id="方法实现"><a href="#方法实现" class="headerlink" title="方法实现"></a>方法实现</h2>
                  <p>恩，重要的地方都已经点明了，下面就直接附上我的种子填充算法吧！</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//种子填充算法</span></span><br><span class="line">void zz<span class="constructor">Fill(<span class="params">int</span> <span class="params">startX</span>,<span class="params">int</span> <span class="params">startY</span>,<span class="params">int</span> <span class="params">r</span>,<span class="params">int</span> <span class="params">g</span>,<span class="params">int</span> <span class="params">b</span>)</span>&#123;</span><br><span class="line">	stack&lt;Point&gt; pixelStack;</span><br><span class="line">	<span class="comment">//x,y是给定的种子像素点，rgb就是要填充的颜色的RGB值</span></span><br><span class="line">	Point point  = &#123;startX,startY&#125;;</span><br><span class="line">	pixelStack.push(point);</span><br><span class="line">	<span class="built_in">int</span> saveX;</span><br><span class="line">	<span class="built_in">int</span> xRight,xLeft;</span><br><span class="line">	<span class="built_in">int</span> x,y;</span><br><span class="line">	<span class="comment">//如果栈不为空</span></span><br><span class="line">	<span class="keyword">while</span>(!pixelStack.empty<span class="literal">()</span>)&#123;</span><br><span class="line">		<span class="comment">//获取最顶端的元素</span></span><br><span class="line">		Point tempPoint=pixelStack.top<span class="literal">()</span>;</span><br><span class="line">		<span class="comment">//删除最顶端的元素</span></span><br><span class="line">		pixelStack.pop<span class="literal">()</span>;</span><br><span class="line">		saveX=tempPoint.x;</span><br><span class="line">		x=tempPoint.x;</span><br><span class="line">		y=tempPoint.y;</span><br><span class="line">		gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfHeight</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">		<span class="comment">//如果没有到达右边界，就填充</span></span><br><span class="line">		<span class="keyword">while</span>(!same<span class="constructor">Color(<span class="params">iPixel</span>[0],<span class="params">iPixel</span>[1],<span class="params">iPixel</span>[2],<span class="params">borderColor</span>[0],<span class="params">borderColor</span>[1],<span class="params">borderColor</span>[2])</span>)&#123;</span><br><span class="line">			gl<span class="constructor">Point(<span class="params">x</span>,<span class="params">y</span>,<span class="params">r</span>,<span class="params">g</span>,<span class="params">b</span>)</span>;</span><br><span class="line">			x=x+<span class="number">1</span>;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfHeight</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		xRight=x-<span class="number">1</span>;</span><br><span class="line">		x=saveX-<span class="number">1</span>;</span><br><span class="line">		gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfWidth</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">		<span class="comment">//如果没有到达左边界，就填充</span></span><br><span class="line">		<span class="keyword">while</span>(!same<span class="constructor">Color(<span class="params">iPixel</span>[0],<span class="params">iPixel</span>[1],<span class="params">iPixel</span>[2],<span class="params">borderColor</span>[0],<span class="params">borderColor</span>[1],<span class="params">borderColor</span>[2])</span>)&#123;</span><br><span class="line">			gl<span class="constructor">Point(<span class="params">x</span>,<span class="params">y</span>,<span class="params">r</span>,<span class="params">g</span>,<span class="params">b</span>)</span>;</span><br><span class="line">			x=x-<span class="number">1</span>;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfWidth</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">//保存左端点</span></span><br><span class="line">		xLeft=x+<span class="number">1</span>;</span><br><span class="line">		<span class="comment">//从右边的点开始</span></span><br><span class="line">		x=xRight;</span><br><span class="line">		<span class="comment">//检查上端的扫描线</span></span><br><span class="line">		y=y+<span class="number">1</span>;</span><br><span class="line">		<span class="keyword">while</span>(x&gt;=xLeft)&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfWidth</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">			<span class="keyword">if</span>(!same<span class="constructor">Color(<span class="params">iPixel</span>[0],<span class="params">iPixel</span>[1],<span class="params">iPixel</span>[2],<span class="params">borderColor</span>[0],<span class="params">borderColor</span>[1],<span class="params">borderColor</span>[2])</span>&amp;&amp;!same<span class="constructor">Color(<span class="params">iPixel</span>[0],<span class="params">iPixel</span>[1],<span class="params">iPixel</span>[2],<span class="params">r</span>,<span class="params">g</span>,<span class="params">b</span>)</span>)&#123;</span><br><span class="line">				<span class="comment">//如果上方的点不是边界点，直接压入</span></span><br><span class="line">				Point p=&#123;x,y&#125;;</span><br><span class="line">				pixelStack.push(p);</span><br><span class="line">				<span class="comment">//压入之后停止循环</span></span><br><span class="line">				break;</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				x--;</span><br><span class="line">				gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfWidth</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">//检查下端的扫描线</span></span><br><span class="line">		y=y-<span class="number">2</span>;</span><br><span class="line">		<span class="comment">//从右边的点开始</span></span><br><span class="line">		x=xRight;</span><br><span class="line">		<span class="keyword">while</span>(x&gt;=xLeft)&#123;</span><br><span class="line">			gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfWidth</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">			<span class="keyword">if</span>(!same<span class="constructor">Color(<span class="params">iPixel</span>[0],<span class="params">iPixel</span>[1],<span class="params">iPixel</span>[2],<span class="params">borderColor</span>[0],<span class="params">borderColor</span>[1],<span class="params">borderColor</span>[2])</span>&amp;&amp;!same<span class="constructor">Color(<span class="params">iPixel</span>[0],<span class="params">iPixel</span>[1],<span class="params">iPixel</span>[2],<span class="params">r</span>,<span class="params">g</span>,<span class="params">b</span>)</span>)&#123;</span><br><span class="line">				<span class="comment">//如果上方的点不是边界点，直接压入</span></span><br><span class="line">				Point p=&#123;x,y&#125;;</span><br><span class="line">				<span class="comment">//压入之后停止循环</span></span><br><span class="line">				pixelStack.push(p);</span><br><span class="line">				break;</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				x--;</span><br><span class="line">				gl<span class="constructor">ReadPixels(<span class="params">x</span>+<span class="params">halfWidth</span>,<span class="params">y</span>+<span class="params">halfWidth</span>,1,1,GL_RGB,GL_UNSIGNED_BYTE,&amp;<span class="params">iPixel</span>)</span>;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是我实现的种子填充算法，仅供参考 在这里我们用到了glPoint画点的方法，这是我们定义的，方法如下，为了便于调试，每画一个点刷新一下，这样我们就可以看到绘制的全部动态效果。</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画点</span></span><br><span class="line">void gl<span class="constructor">Point(<span class="params">int</span> <span class="params">x</span>,<span class="params">int</span> <span class="params">y</span>,<span class="params">int</span> <span class="params">r</span>,<span class="params">int</span> <span class="params">g</span>,<span class="params">int</span> <span class="params">b</span>)</span>&#123;</span><br><span class="line">	glColor3ub (r,g,b);  </span><br><span class="line">	gl<span class="constructor">PointSize(1)</span>;</span><br><span class="line">	gl<span class="constructor">Begin(GL_POINTS)</span>;</span><br><span class="line">	gl<span class="constructor">Vertex2i(<span class="params">x</span>,<span class="params">y</span>)</span>;</span><br><span class="line">	gl<span class="constructor">End()</span>;</span><br><span class="line">	gl<span class="constructor">Flush()</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是画点的函数</p>
                  <h2 id="方法使用"><a href="#方法使用" class="headerlink" title="方法使用"></a>方法使用</h2>
                  <p>种子填充算法肯定要在我们绘制完机器人之后使用，任意选取某个四连通区域的点，传入xy坐标值还有要填充的颜色的RGB值，就可以成功实现填充。 在上一篇机器人的基础上，我们在画机器人的方法最后加入下面的代码，即可实现填充。</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//灰色:195,195,195</span></span><br><span class="line"><span class="comment">//黄色:255,243,0</span></span><br><span class="line"><span class="comment">//红色:237,28,36</span></span><br><span class="line"><span class="comment">//深灰色:126,126,126</span></span><br><span class="line"><span class="comment">//脖子</span></span><br><span class="line">zzFill(<span class="number">0</span>,<span class="number">70</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line"><span class="comment">//头</span></span><br><span class="line">zzFill(<span class="number">-50</span>,<span class="number">110</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line">zzFill(<span class="number">0</span>,<span class="number">93</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line"><span class="comment">//肚子</span></span><br><span class="line">zzFill(<span class="number">-50</span>,<span class="number">0</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line"><span class="comment">//耳朵</span></span><br><span class="line">zzFill(<span class="number">-80</span>,<span class="number">115</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line">zzFill(<span class="number">80</span>,<span class="number">115</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line"><span class="comment">//肚子三角</span></span><br><span class="line">zzFill(<span class="number">-20</span>,<span class="number">-10</span>,<span class="number">255</span>,<span class="number">243</span>,<span class="number">0</span>);</span><br><span class="line"><span class="comment">//肚子红色圆</span></span><br><span class="line">zzFill(<span class="number">0</span>,<span class="number">0</span>,<span class="number">237</span>,<span class="number">28</span>,<span class="number">36</span>);</span><br><span class="line"><span class="comment">//zzFill(-50,0,128,255,33);</span></span><br><span class="line"><span class="comment">//大臂</span></span><br><span class="line">zzFill(<span class="number">-90</span>,<span class="number">30</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line">zzFill(<span class="number">90</span>,<span class="number">30</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line"><span class="comment">//小臂</span></span><br><span class="line">zzFill(<span class="number">-90</span>,<span class="number">-20</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line">zzFill(<span class="number">90</span>,<span class="number">-20</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line"><span class="comment">//手</span></span><br><span class="line">zzFill(<span class="number">-75</span>,<span class="number">40</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line">zzFill(<span class="number">75</span>,<span class="number">40</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line"><span class="comment">//手</span></span><br><span class="line">zzFill(<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line">zzFill(<span class="number">95</span>,<span class="number">-47</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line"><span class="comment">//大腿连接处</span></span><br><span class="line">zzFill(<span class="number">-40</span>,<span class="number">-64</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line">zzFill(<span class="number">40</span>,<span class="number">-64</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line"><span class="comment">//大腿</span></span><br><span class="line">zzFill(<span class="number">-40</span>,<span class="number">-100</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line">zzFill(<span class="number">40</span>,<span class="number">-100</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line"><span class="comment">//脚踝</span></span><br><span class="line">zzFill(<span class="number">-40</span>,<span class="number">-121</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line">zzFill(<span class="number">40</span>,<span class="number">-121</span>,<span class="number">195</span>,<span class="number">195</span>,<span class="number">195</span>);</span><br><span class="line"><span class="comment">//脚掌</span></span><br><span class="line">zzFill(<span class="number">-40</span>,<span class="number">-130</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line">zzFill(<span class="number">40</span>,<span class="number">-130</span>,<span class="number">126</span>,<span class="number">126</span>,<span class="number">126</span>);</span><br><span class="line">system(<span class="string">"pause"</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>注意，有个很奇怪地方是绘制完了之后机器人就不见了，所以在这里加入了system(“pause”)方法来暂停一下就好啦。 其他的代码基本都是上一篇中的了，大家自行整理。</p>
                  <h2 id="运行结果"><a href="#运行结果" class="headerlink" title="运行结果"></a>运行结果</h2>
                  <p>运行结果截图如下 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150419015002.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150419015002.jpg" alt="20150419015002"></a> 恩，就是这样！</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>以上便是博主利用种子填充算法来实现的机器人的颜色填充，在此分享给大家，希望对大家有帮助！ 如有问题和错误，欢迎大家给予我批评和指正，谢谢！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-19 02:00:00" itemprop="dateCreated datePublished" datetime="2015-04-19T02:00:00+08:00">2015-04-19</time>
                </span>
                <span id="/1640.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例三之种子填充算法" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>7.4k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>7 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1622.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> 福利专区 <i class="label-arrow"></i>
                  </a>
                  <a href="/1622.html" class="post-title-link" itemprop="url">福利！还在用控制面板来隐藏文件夹？来试试这个吧！</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>小伙伴们总要有一些秘密是不能让别人知道的，之前我们使用的设置隐藏文件夹然后在控制面板设置不显示隐藏文件夹的方式都弱爆了，下面我们来用一种更高级的办法来设置隐藏文件夹，感受一下。</p>
                  <h2 id="设置隐藏"><a href="#设置隐藏" class="headerlink" title="设置隐藏"></a>设置隐藏</h2>
                  <p>首先我们创建一个文件夹，比如名字叫 SECRET，如图所示 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415114405.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415114405.jpg" alt="20150415114405"></a> 接下来我们打开命令行，输入如下命令</p>
                  <figure class="highlight dos">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="built_in">attrib</span> +s +h e:/SECRET</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p><a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415114811.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415114811.jpg" alt="20150415114811"></a> 输入命令之后，我们再查看一下E盘的内容，<strong>刷新一下，记得刷新！</strong>。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415120601.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415120601.jpg" alt="20150415120601"></a> 恩，那个文件夹已经不见了，有人说设置一下控制面板就显示出来了。 好，我们试试，控制面板<strong>设置显示隐藏的文件夹</strong> <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415120426.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415120426.jpg" alt="20150415120426"></a> 恩，我们再看看，它依然是找不到的，就是这样！ <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415120601.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415120601.jpg" alt="20150415120601"></a> 那么我们怎么找到它？很简单，访问的时候只要在输入文件夹名称就会找到它了。 比如，我在地址栏中输入 E:/SECRET，就可以找到它了 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415115101.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415115101-e1429070400267.jpg" alt="20150415115101"></a> 下面我们来介绍一下这个命令的用法</p>
                  <blockquote>
                    <p>attrib命令用来显示或更改文件属性。</p>
                    <p>ATTRIB [+R | -R] [+A | -A ] [+S | -S] [+H | -H] [[drive:] [path] filename] [/S [/D]] + 设置属性。 - 清除属性。 R 只读文件属性。 A 存档文件属性。 S 系统文件属性。 H 隐藏文件属性。 [drive:][path][filename] 指定要处理的文件属性。 /S 处理当前文件夹及其子文件夹中的匹配文件。 /D 也处理文件夹。</p>
                  </blockquote>
                  <p>比如</p>
                  <figure class="highlight dos">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="built_in">attrib</span> +a +s +r +h e:/SECRET</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这句命令就是设置E盘的SECRET文件夹为存档文件、系统文件、只读文件、隐藏文件。</p>
                  <p>在这里我们只要设置为隐藏文件盒系统文件属性就可以完成文件夹的隐藏，是不是很酷炫？</p>
                  <h2 id="取消隐藏"><a href="#取消隐藏" class="headerlink" title="取消隐藏"></a>取消隐藏</h2>
                  <p>了解了上面的命令，取消隐藏就很简单啦，我们只需要输入下面的命令</p>
                  <figure class="highlight dos">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="built_in">attrib</span> -h -s e:/SECRET</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>再刷新一下目录，SECRET目录就又出现了。</p>
                  <p><a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415115831.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150415115831.jpg" alt="20150415115831"></a></p>
                  <p>恩，会了吧，小伙伴们还不赶紧试试。不用谢我，请叫我雷锋！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-15 12:01:37" itemprop="dateCreated datePublished" datetime="2015-04-15T12:01:37+08:00">2015-04-15</time>
                </span>
                <span id="/1622.html" class="post-meta-item leancloud_visitors" data-flag-title="福利！还在用控制面板来隐藏文件夹？来试试这个吧！" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>752</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>1 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1613.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1613.html" class="post-title-link" itemprop="url">OpenGL绘图实例二之直线和圆弧的绘制</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>在上一篇文章我们介绍了利用类库来完成一个机器人绘制的过程，这里我们一起来看一下怎样直接利用直线和圆弧生成算法来进行图形的绘制。 <strong>P.S. 本篇文章针对《计算机图形学》张彩明 版来探讨学习。关于书中的详细算法不会再赘述。</strong> <strong>P.P.S. 本篇文章算法扩展思路及代码实现为博主原创内容，如存在纰漏和错误，希望大家指正。</strong></p>
                  <h2 id="直线生成算法"><a href="#直线生成算法" class="headerlink" title="直线生成算法"></a>直线生成算法</h2>
                  <h3 id="1-DDA算法"><a href="#1-DDA算法" class="headerlink" title="1.DDA算法"></a>1.DDA算法</h3>
                  <p>DDA算法是最基本的一种直线生成算法了，代码实现简单，不过缺点是计算量比较大，画一个点要两次加法，两次取整运算。另外，DDA算法还包括了除法运算。不仅算法复杂，而且硬件实现上有一定的难度。优点就是程序简单易懂，在这里实现如下</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画直线的DDA算法</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">dda</span><span class="params">(<span class="keyword">int</span> x1,<span class="keyword">int</span> y1,<span class="keyword">int</span> x2,<span class="keyword">int</span> y2)</span></span>&#123;</span><br><span class="line">	<span class="keyword">int</span> k,i;</span><br><span class="line">	<span class="keyword">float</span> x,y,dx,dy;</span><br><span class="line">	<span class="comment">//使k等于横纵坐标差值的较大者</span></span><br><span class="line">	k = <span class="built_in">abs</span>(x2-x1);</span><br><span class="line">	<span class="keyword">if</span>(<span class="built_in">abs</span>(y2-y1)&gt;k)</span><br><span class="line">		k = <span class="built_in">abs</span>(y2-y1);</span><br><span class="line">	<span class="comment">//直线被划分为每一小段的长度</span></span><br><span class="line">	dx = <span class="keyword">float</span>(x2-x1)/k;</span><br><span class="line">	dy = <span class="keyword">float</span>(y2-y1)/k;</span><br><span class="line">	x = <span class="keyword">float</span>(x1);</span><br><span class="line">	y = <span class="keyword">float</span>(y1);</span><br><span class="line">	<span class="keyword">for</span>(i = <span class="number">0</span>;i&lt;k;i++)&#123;</span><br><span class="line">		<span class="comment">//此处先加0.5再取整的作用是四舍五入</span></span><br><span class="line">		gl_Point((<span class="keyword">int</span>)(x+<span class="number">0.5</span>),(<span class="keyword">int</span>)(y+<span class="number">0.5</span>));</span><br><span class="line">		<span class="comment">//x和y分别增加相应的单位</span></span><br><span class="line">		x = x+dx;</span><br><span class="line">		y = y+dy;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>解释一下这里的gl_Point方法，这个方法并不是直接调用类库的方法，而是我们自己来实现的画点的方法。</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画点</span></span><br><span class="line">void gl<span class="constructor">_Point(<span class="params">int</span> <span class="params">x</span>,<span class="params">int</span> <span class="params">y</span>)</span>&#123;</span><br><span class="line">	gl<span class="constructor">Begin(GL_POINTS)</span>;</span><br><span class="line">	gl<span class="constructor">Vertex2i(<span class="params">x</span>,<span class="params">y</span>)</span>;</span><br><span class="line">	gl<span class="constructor">End()</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>用来画点的话，我们必须要在glBegin方法传入GL_POINTS参数，然后利用类库中画点的方法来绘制点。</p>
                  <h3 id="2-正负法"><a href="#2-正负法" class="headerlink" title="2.正负法"></a>2.正负法</h3>
                  <p>在教材中只讨论了斜率在0-1之间的情况，代码的实现也是仅仅只有0-1一种情况，对于斜率大于1，斜率在-1和0之间以及斜率小于-1的情况没有加以讨论。 如果我们直接拿来教材中的代码来用，我们会发现只能绘制出0-1斜率的直线，对于其他的情况，均绘制错误。 所以我们需要分四种情况来讨论，直线方程 F(x,y)=ax+by+c=0，其中 a=ys-ye，b=xe-xs 设直线的斜率为k，讨论分类如下 <strong>（1）k∈[0,1)</strong> 此时有 a<0，b>0 d=F(M)=F(x+1,y+0.5)=a(x+1)+b(y+0.5)+c 当d&gt;=0时，Q在M点下方，取右下方的点，d1=F(x+2,y+0.5)=a(x+2)+b(y+0.5)+c=d+a 当d<0时，Q在M点上方，取右上方的点，d2=F(x+2,y+1.5)=a(x+2)+b(y+1.5)+c=d+a+b 此时d的初始值 d0=F(xs+1,ys+0.5)=a+0.5b **（2）k∈[1,+∞]** 此时有 a<0，b>0 d=F(M)=F(x+0.5,y+1)=a(x+0.5)+b(y+1)+c 当d&gt;=0时，Q在M点右侧，取右上方的点，d1=F(x+1.5,y+2)=a(x+1.5)+b(y+2)+c=a+b+d 当d<0时，Q在M点左侧，取左上方的点，d2=F(x+0.5,y+2)=b+d 此时d的初始值 d0=F(xs+0.5,ys+1)=0.5a+b **（3）k∈[-1,0)** 此时有 a>0，b&gt;0 d=F(M)=F(x+1,y-0.5)=a(x+1)+b(y-0.5)+c 当d&gt;=0时，Q在M点下方，取右下方的点，d1=F(x+2,y-1.5)=a(x+2)+b(y-1.5)+c=a-b+d 当d<0时，Q在M点上方，取右上方的点，d2=F(x+2,y-0.5)=a(x+2)+b(y-0.5)+c=a+d 此时d的初始值 d0=F(xs+1,ys-0.5)=a-0.5b **（4）k∈[-∞,-1)** 此时有 a>0，b&gt;0 d=F(M)=F(x+0.5,y-1)=a(x+0.5)+b(y-1)+c 当d&gt;=0时，Q在M点左方，取左下方的点，d1=F(x+0.5,y-2)=a(x+0.5)+b(y-2)+c=d-b 当d&lt;0时，Q在M点右方，取右下方的点，d2=F(x+1.5,y-2)=a(x+1.5)+b(y-2)+c=a-b+d 此时d的初始值 d0=F(xs+0.5,ys-1)=0.5a-b <strong>注意：上面的a和b的符号，是在默认起点在终点的左侧来看待的</strong> 所以，如果我们传入参数时，第二个点在第一个点的左侧时，我们可能就不会得到正确的结果。所以当我们发现第二个点不在第一个点右侧时，就需要把二者的横纵坐标交换。 代码实现如下，此实现<strong>仅供参考</strong>，未经优化。</p>
                  <figure class="highlight sas">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">//画直线的正负法</span><br><span class="line">void midPointLine(int xs,int ys,int xe,int ye)&#123;</span><br><span class="line">	<span class="meta">if</span>(xs&gt;xe)&#123;</span><br><span class="line">		swap(xs,xe);</span><br><span class="line">		swap(ys,ye);</span><br><span class="line">	&#125;</span><br><span class="line">	float a,b,dt1,dt2,d,<span class="meta">x</span>,y;</span><br><span class="line">	a=ys-ye;</span><br><span class="line">	b=xe-xs;</span><br><span class="line">	float k =(float)(ye-ys)/(xe-xs);</span><br><span class="line">	<span class="meta">if</span>(k&gt;=0<span class="variable">&amp;&amp;k</span>&lt;1)&#123;</span><br><span class="line">		d=2<span class="comment">*a+b;</span></span><br><span class="line">		dt1=2<span class="comment">*a;</span></span><br><span class="line">		dt2=2<span class="comment">*(a+b);</span></span><br><span class="line">	&#125;<span class="meta">else</span> <span class="meta">if</span>(k&gt;=1)&#123;</span><br><span class="line">		d=a+2<span class="comment">*b;</span></span><br><span class="line">		dt1=2<span class="comment">*(a+b);</span></span><br><span class="line">		dt2=2<span class="comment">*b;</span></span><br><span class="line">	&#125;<span class="meta">else</span> <span class="meta">if</span>(k&lt;0<span class="variable">&amp;&amp;k</span>&gt;=-1)&#123;</span><br><span class="line">		d=2<span class="comment">*a-b;</span></span><br><span class="line">		dt1=2<span class="comment">*(a-b);</span></span><br><span class="line">		dt2=2<span class="comment">*a;</span></span><br><span class="line">	&#125;<span class="meta">else</span> <span class="meta">if</span>(k&lt;-1)&#123;</span><br><span class="line">		d=a-2<span class="comment">*b;</span></span><br><span class="line">		dt1=-2<span class="comment">*b;</span></span><br><span class="line">		dt2=2<span class="comment">*(a-b);</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="meta">x</span>=xs;y=ys;</span><br><span class="line">	gl<span class="meta">_Point(</span><span class="meta">x</span>,y);</span><br><span class="line">	<span class="meta">if</span>(k&gt;=0<span class="variable">&amp;&amp;k</span>&lt;1)&#123;</span><br><span class="line">		<span class="meta">while</span>(<span class="meta">x</span>&lt;xe)&#123;</span><br><span class="line">			<span class="meta">if</span>(d&lt;0)&#123;</span><br><span class="line">				<span class="meta">x</span>++;y++;d+=dt2;</span><br><span class="line">			&#125;<span class="meta">else</span>&#123;</span><br><span class="line">				<span class="meta">x</span>++;d+=dt1;</span><br><span class="line">			&#125;</span><br><span class="line">			gl<span class="meta">_Point(</span><span class="meta">x</span>,y);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="meta">else</span> <span class="meta">if</span>(k&gt;=1)&#123;</span><br><span class="line">		<span class="meta">while</span>(y&lt;ye)&#123;</span><br><span class="line">			<span class="meta">if</span>(d&lt;0)&#123;</span><br><span class="line">				y++;d+=dt2;</span><br><span class="line">			&#125;<span class="meta">else</span>&#123;</span><br><span class="line">				y++;<span class="meta">x</span>++;d+=dt1;</span><br><span class="line">			&#125;</span><br><span class="line">			gl<span class="meta">_Point(</span><span class="meta">x</span>,y);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="meta">else</span> <span class="meta">if</span>(k&lt;0<span class="variable">&amp;&amp;k</span>&gt;=-1)&#123;</span><br><span class="line">		<span class="meta">while</span>(<span class="meta">x</span>&lt;xe)&#123;</span><br><span class="line">			<span class="meta">if</span>(d&lt;0)&#123;</span><br><span class="line">				<span class="meta">x</span>++;d+=dt2;</span><br><span class="line">			&#125;<span class="meta">else</span>&#123;</span><br><span class="line">				<span class="meta">x</span>++;y--;d+=dt1;</span><br><span class="line">			&#125;</span><br><span class="line">			gl<span class="meta">_Point(</span><span class="meta">x</span>,y);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="meta">else</span> <span class="meta">if</span>(k&lt;-1)&#123;</span><br><span class="line">		<span class="meta">while</span>(y&gt;ye)&#123;</span><br><span class="line">			<span class="meta">if</span>(d&lt;0)&#123;</span><br><span class="line">				y--;<span class="meta">x</span>++;d+=dt2;</span><br><span class="line">			&#125;<span class="meta">else</span>&#123;</span><br><span class="line">				y--;d+=dt1;</span><br><span class="line">			&#125;</span><br><span class="line">			gl<span class="meta">_Point(</span><span class="meta">x</span>,y);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在一开始我们用到了swap方法，是用来交换两个数字的，实现如下</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//交换两个数字</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">swap</span><span class="params">(<span class="keyword">int</span> &amp;x1,<span class="keyword">int</span> &amp;x2)</span></span>&#123;</span><br><span class="line">	<span class="keyword">int</span> temp = x2;</span><br><span class="line">	x2=x1;</span><br><span class="line">	x1=temp;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是正负法的实现，代码仅供参考。</p>
                  <h3 id="3-Bresenham算法"><a href="#3-Bresenham算法" class="headerlink" title="3.Bresenham算法"></a>3.Bresenham算法</h3>
                  <p>在教材中，同样是只针对斜率在0-1之间讨论。对于教材中的程序，我们也只能绘制斜率为0-1的直线，所以我们需要对另外三种情况进行扩充。 分类讨论如下 <strong>（1）k∈[0,1)</strong> 即教材中的讲解方法 <strong>（2）k∈[1,+∞]</strong> 需要把x和y互换即可 <strong>（3）k∈[-1,0)</strong> x不变，y换为-y <strong>（4）k∈[-∞,-1)</strong> x换为-y，y换为x 程序实现如下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画直线的Bresenham方法</span></span><br><span class="line"><span class="built_in">void</span> bresen(<span class="built_in">int</span> x1,<span class="built_in">int</span> y1,<span class="built_in">int</span> x2,<span class="built_in">int</span> y2)&#123;</span><br><span class="line">	<span class="keyword">if</span>(x2&lt;x1)&#123;</span><br><span class="line">		swap(x1,x2);</span><br><span class="line">		swap(y1,y2);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">float</span> dx=x2-x1;</span><br><span class="line">	<span class="built_in">float</span> dy=y2-y1;</span><br><span class="line">	<span class="built_in">float</span> k=dy/dx;</span><br><span class="line">	<span class="built_in">float</span> m,e;<span class="built_in">int</span> i;</span><br><span class="line">	<span class="built_in">float</span> x=x1,y=y1;</span><br><span class="line">	<span class="keyword">if</span>(k&gt;=<span class="number">0</span>&amp;&amp;k&lt;<span class="number">1</span>)&#123;</span><br><span class="line">		<span class="comment">//斜率为0到1</span></span><br><span class="line">		m=dy/dx;</span><br><span class="line">		e=m<span class="number">-0.5</span>;</span><br><span class="line">		<span class="keyword">for</span>(i=<span class="number">0</span>;i&lt;dx;i++)&#123;</span><br><span class="line">			gl_Point(x,y);</span><br><span class="line">			<span class="keyword">if</span>(e&gt;=<span class="number">0</span>)&#123;</span><br><span class="line">				y+=<span class="number">1</span>;e-=<span class="number">1</span>;</span><br><span class="line">			&#125;</span><br><span class="line">			x+=<span class="number">1</span>;e+=m;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">else</span> <span class="keyword">if</span>(k&gt;=<span class="number">1</span>)&#123;</span><br><span class="line">		<span class="comment">//x换为y,y换为x</span></span><br><span class="line">		m=dx/dy;</span><br><span class="line">		e=m<span class="number">-0.5</span>;</span><br><span class="line">		<span class="keyword">for</span>(i=<span class="number">0</span>;i&lt;dy;i++)&#123;</span><br><span class="line">			gl_Point(x,y);</span><br><span class="line">			<span class="keyword">if</span>(e&gt;=<span class="number">0</span>)&#123;</span><br><span class="line">				x+=<span class="number">1</span>;e-=<span class="number">1</span>;</span><br><span class="line">			&#125;</span><br><span class="line">			y+=<span class="number">1</span>;e+=m;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">else</span> <span class="keyword">if</span>(k&lt;<span class="number">0</span>&amp;&amp;k&gt;=<span class="number">-1</span>)&#123;</span><br><span class="line">		<span class="comment">//x不变，y换为-y</span></span><br><span class="line">		m=-dy/dx;</span><br><span class="line">		e=m+<span class="number">0.5</span>;</span><br><span class="line">		<span class="keyword">for</span>(i=<span class="number">0</span>;i&lt;dx;i++)&#123;</span><br><span class="line">			gl_Point(x,y);</span><br><span class="line">			<span class="keyword">if</span>(e&lt;=<span class="number">0</span>)&#123;</span><br><span class="line">				y-=<span class="number">1</span>;e+=<span class="number">1</span>;</span><br><span class="line">			&#125;</span><br><span class="line">			x+=<span class="number">1</span>;e-=m;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="comment">//将x换为-y,y换为x</span></span><br><span class="line">		m=-dx/dy;</span><br><span class="line">		e=m+<span class="number">0.5</span>;</span><br><span class="line">		<span class="keyword">for</span>(i=<span class="number">0</span>;i&lt;-dy;i++)&#123;</span><br><span class="line">			gl_Point(x,y);</span><br><span class="line">			<span class="keyword">if</span>(e&lt;=<span class="number">0</span>)&#123;</span><br><span class="line">				x+=<span class="number">1</span>;e+=<span class="number">1</span>;</span><br><span class="line">			&#125;</span><br><span class="line">			y-=<span class="number">1</span>;e-=m;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是Bresenham算法，经测试通过。</p>
                  <h2 id="圆弧生成算法"><a href="#圆弧生成算法" class="headerlink" title="圆弧生成算法"></a>圆弧生成算法</h2>
                  <h3 id="1-正负法"><a href="#1-正负法" class="headerlink" title="1.正负法"></a>1.正负法</h3>
                  <p>教材中只讨论了圆弧在第一象限的情况，不过有趣的是，圆是具有对称性的，在绘制圆形时，我们如果把x换为-x，就可以绘制第二象限的图形，把y换为-y，就可以绘制第四象限的图形，代码也不需要改动很多。只需要在gl_Point上面下功夫即可。 另外，教材中圆弧生成算法中没有指定圆的中心点的坐标，我们可以把它当做参数来传递进来，然后传入gl_Point绘图函数即可，相当方便。 注：此方法不需要再繁琐地分类讨论。 在这里给出博主写出的两种方法，一种是如上所介绍的思路，利用对称性，另一种是分类讨论的思想。 <strong>（1）利用对称性实现</strong></p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//正负法画圆</span></span><br><span class="line">void pnarc<span class="constructor">Arc(<span class="params">int</span> <span class="params">radius</span>,<span class="params">int</span> <span class="params">centerX</span>,<span class="params">int</span> <span class="params">centerY</span>,<span class="params">int</span> <span class="params">area</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">int</span> x,y,f;</span><br><span class="line">	x=<span class="number">0</span>;y=<span class="number">0</span>+radius;f=<span class="number">0</span>;</span><br><span class="line">	<span class="keyword">while</span>(y&gt;<span class="number">0</span>)&#123;</span><br><span class="line">		switch(area)&#123;</span><br><span class="line">		case <span class="number">1</span>:</span><br><span class="line">			gl<span class="constructor">_Point(<span class="params">x</span>+<span class="params">centerX</span>,<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">2</span>:</span><br><span class="line">			gl<span class="constructor">_Point(-<span class="params">x</span>+<span class="params">centerX</span>,<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">3</span>:</span><br><span class="line">			gl<span class="constructor">_Point(-<span class="params">x</span>+<span class="params">centerX</span>,-<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">4</span>:</span><br><span class="line">			gl<span class="constructor">_Point(<span class="params">x</span>+<span class="params">centerX</span>,-<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span>(f&gt;<span class="number">0</span>)&#123;</span><br><span class="line">			f=f-<span class="number">2</span>*y+<span class="number">1</span>;</span><br><span class="line">			y=y-<span class="number">1</span>;</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			f=f+<span class="number">2</span>*x+<span class="number">1</span>;</span><br><span class="line">			x=x+<span class="number">1</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(y==centerY)&#123;</span><br><span class="line">		gl<span class="constructor">_Point(<span class="params">x</span>,<span class="params">y</span>)</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p> <strong>（2）分类讨论思想</strong></p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//正负法画圆3</span></span><br><span class="line"><span class="built_in">void</span> pnarcArc(<span class="built_in">int</span> radius,<span class="built_in">int</span> centerX,<span class="built_in">int</span> centerY,<span class="built_in">int</span> area)&#123;</span><br><span class="line">	<span class="built_in">int</span> x,y,f;</span><br><span class="line">	<span class="built_in">int</span> tag[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>&#125;;</span><br><span class="line">	<span class="built_in">int</span> tagX[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>,<span class="number">1</span>&#125;;</span><br><span class="line">	<span class="built_in">int</span> tagY[<span class="number">4</span>]=&#123;<span class="number">-1</span>,<span class="number">-1</span>,<span class="number">1</span>,<span class="number">1</span>&#125;;</span><br><span class="line">	x=<span class="number">0</span>;y=tag[area<span class="number">-1</span>]*radius;f=<span class="number">0</span>;</span><br><span class="line">	<span class="keyword">while</span>(tag[area<span class="number">-1</span>]*y&gt;<span class="number">0</span>)&#123;</span><br><span class="line">		gl_Point(x+centerX,y+centerY);</span><br><span class="line">		<span class="keyword">if</span>(f&gt;<span class="number">0</span>)&#123;</span><br><span class="line">			f=f+tagY[area<span class="number">-1</span>]*<span class="number">2</span>*y+<span class="number">1</span>;</span><br><span class="line">			y=y+tagY[area<span class="number">-1</span>];</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			f=f+tagX[area<span class="number">-1</span>]*<span class="number">2</span>*x+<span class="number">1</span>;</span><br><span class="line">			x=x+tagX[area<span class="number">-1</span>];</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(y==centerY)&#123;</span><br><span class="line">		gl_Point(x,y);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在上面的代码中，我们传入了centerX和centerY以及area参数。其中centerX和centerY是圆弧中心点的坐标，area是所在的<strong>象限</strong>，传入的参数需要是1,2,3,4中的一个数字，如果传入其他数字则不会绘制出任何图形。 注：此方法只能一次性绘制一个四分之一圆弧，局限性比较大，如果要融入弧度，改动量比较大。</p>
                  <h3 id="2-Bresenham算法"><a href="#2-Bresenham算法" class="headerlink" title="2.Bresenham算法"></a>2.Bresenham算法</h3>
                  <p>和上面方法类似，我们的实现同样非常简单，即使教材中只讨论了八分之一圆，我们可以利用对称的思想来实现画圆。另外我们添加了圆弧中心点坐标已经所在的区块。 从（π/4,π/2）这个区块开始，编号为1，角度为45°，顺时针旋转（0,π/4）的编号为2，以此类推，参数变量为area 代码实现如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//Bresenham画圆算法</span></span><br><span class="line">void bresenham<span class="constructor">Arc(<span class="params">int</span> R,<span class="params">int</span> <span class="params">centerX</span>,<span class="params">int</span> <span class="params">centerY</span>,<span class="params">int</span> <span class="params">area</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">int</span> x,y,d;</span><br><span class="line">	x=<span class="number">0</span>;y=R;d=<span class="number">3</span>-<span class="number">2</span>*R;</span><br><span class="line">	<span class="keyword">while</span>(x&lt;y)&#123;</span><br><span class="line">		switch(area)&#123;</span><br><span class="line">		case <span class="number">1</span>:</span><br><span class="line">			gl<span class="constructor">_Point(<span class="params">x</span>+<span class="params">centerX</span>,<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">2</span>:</span><br><span class="line">			gl<span class="constructor">_Point(<span class="params">y</span>+<span class="params">centerX</span>,<span class="params">x</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">3</span>:</span><br><span class="line">			gl<span class="constructor">_Point(<span class="params">y</span>+<span class="params">centerX</span>,-<span class="params">x</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">4</span>:</span><br><span class="line">			gl<span class="constructor">_Point(<span class="params">x</span>+<span class="params">centerX</span>,-<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">5</span>:</span><br><span class="line">			gl<span class="constructor">_Point(-<span class="params">x</span>+<span class="params">centerX</span>,-<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">6</span>:</span><br><span class="line">			gl<span class="constructor">_Point(-<span class="params">y</span>+<span class="params">centerX</span>,-<span class="params">x</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">7</span>:</span><br><span class="line">			gl<span class="constructor">_Point(-<span class="params">y</span>+<span class="params">centerX</span>,<span class="params">x</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		case <span class="number">8</span>:</span><br><span class="line">			gl<span class="constructor">_Point(-<span class="params">x</span>+<span class="params">centerX</span>,<span class="params">y</span>+<span class="params">centerY</span>)</span>;</span><br><span class="line">			break;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span>(d&lt;<span class="number">0</span>)&#123;</span><br><span class="line">			d=d+<span class="number">4</span>*x+<span class="number">6</span>;</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			d=d+<span class="number">4</span>*(x-y)+<span class="number">10</span>;</span><br><span class="line">			y=y-<span class="number">1</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		x=x+<span class="number">1</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(x==y)&#123;</span><br><span class="line">		gl<span class="constructor">_Point(<span class="params">x</span>,<span class="params">y</span>)</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>此段代码亲测可用，仅供参考。</p>
                  <h2 id="终极目标"><a href="#终极目标" class="headerlink" title="终极目标"></a>终极目标</h2>
                  <p>上一节我们实现了用类库的方法和sin，cos方法来定位坐标绘制机器人，在这一节我们就利用上述的直线和圆弧生成算法，对上一篇中的机器人进行绘制。 在这里只贴出最核心的部分，那就是绘画的函数了，只是简单地传入坐标点然后调用刚才实现的一些方法，比较繁琐，但是比较简单，核心代码如下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//myDisplay函数用来画图</span></span><br><span class="line"><span class="built_in">void</span> myDisplay(<span class="built_in">void</span>)&#123;</span><br><span class="line">	<span class="comment">//清除。GL_COLOR_BUFFER_BIT表示清除颜色，glClear函数还可以清除其它的东西</span></span><br><span class="line">	glClear(GL_COLOR_BUFFER_BIT);</span><br><span class="line">	<span class="comment">//设置黑色颜色</span></span><br><span class="line">	glColor3f (<span class="number">0.0f</span>, <span class="number">0.0f</span>, <span class="number">0.0f</span>);  </span><br><span class="line">	<span class="comment">//中心的圆圈，四个象限，半径为10</span></span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//肚子中三角形，利用了DDA绘制</span></span><br><span class="line">	dda(<span class="number">-30</span>,<span class="number">-15</span>,<span class="number">30</span>,<span class="number">-15</span>);</span><br><span class="line">	dda(<span class="number">-30</span>,<span class="number">-15</span>,<span class="number">0</span>,<span class="number">28</span>);</span><br><span class="line">	dda(<span class="number">0</span>,<span class="number">28</span>,<span class="number">30</span>,<span class="number">-15</span>);</span><br><span class="line">	<span class="comment">//肚子，四条直线</span></span><br><span class="line">	midPointLine(<span class="number">-60</span>,<span class="number">60</span>,<span class="number">60</span>,<span class="number">60</span>);</span><br><span class="line">	midPointLine(<span class="number">-60</span>,<span class="number">-60</span>,<span class="number">60</span>,<span class="number">-60</span>);</span><br><span class="line">	midPointLine(<span class="number">-74</span>,<span class="number">46</span>,<span class="number">-74</span>,<span class="number">-46</span>);</span><br><span class="line">	midPointLine(<span class="number">74</span>,<span class="number">46</span>,<span class="number">74</span>,<span class="number">-46</span>);</span><br><span class="line">	<span class="comment">//肚子，四个半圆</span></span><br><span class="line">	pnarcArc(<span class="number">14</span>,<span class="number">60</span>,<span class="number">46</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">14</span>,<span class="number">-60</span>,<span class="number">46</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">14</span>,<span class="number">-60</span>,<span class="number">-46</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">14</span>,<span class="number">60</span>,<span class="number">-46</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//脖子,两条直线</span></span><br><span class="line">	bresen(<span class="number">-25</span>,<span class="number">76</span>,<span class="number">-25</span>,<span class="number">60</span>);</span><br><span class="line">	bresen(<span class="number">26</span>,<span class="number">76</span>,<span class="number">25</span>,<span class="number">60</span>);</span><br><span class="line">	<span class="comment">//脸，四条直线</span></span><br><span class="line">	midPointLine(<span class="number">-54</span>,<span class="number">150</span>,<span class="number">54</span>,<span class="number">150</span>);</span><br><span class="line">	midPointLine(<span class="number">-54</span>,<span class="number">76</span>,<span class="number">54</span>,<span class="number">76</span>);</span><br><span class="line">	midPointLine(<span class="number">-64</span>,<span class="number">140</span>,<span class="number">-64</span>,<span class="number">86</span>);</span><br><span class="line">	midPointLine(<span class="number">64</span>,<span class="number">140</span>,<span class="number">64</span>,<span class="number">86</span>);</span><br><span class="line">	<span class="comment">//脸，四个圆弧</span></span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">54</span>,<span class="number">140</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-54</span>,<span class="number">140</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-54</span>,<span class="number">86</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">54</span>,<span class="number">86</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//眼睛，两个正圆</span></span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-30</span>,<span class="number">111</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-30</span>,<span class="number">111</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-30</span>,<span class="number">111</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-30</span>,<span class="number">111</span>,<span class="number">4</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">30</span>,<span class="number">111</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">30</span>,<span class="number">111</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">30</span>,<span class="number">111</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">30</span>,<span class="number">111</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//嘴巴，两个八分之一圆</span></span><br><span class="line">	bresenhamArc(<span class="number">20</span>,<span class="number">0</span>,<span class="number">111</span>,<span class="number">4</span>);</span><br><span class="line">	bresenhamArc(<span class="number">20</span>,<span class="number">0</span>,<span class="number">111</span>,<span class="number">5</span>);</span><br><span class="line">	<span class="comment">//天线</span></span><br><span class="line">	dda(<span class="number">-35</span>,<span class="number">150</span>,<span class="number">-35</span>,<span class="number">173</span>);</span><br><span class="line">	dda(<span class="number">35</span>,<span class="number">150</span>,<span class="number">35</span>,<span class="number">173</span>);</span><br><span class="line">	<span class="comment">//右耳朵，四条直线</span></span><br><span class="line">	bresen(<span class="number">88</span>,<span class="number">98</span>,<span class="number">88</span>,<span class="number">131</span>);</span><br><span class="line">	bresen(<span class="number">67</span>,<span class="number">98</span>,<span class="number">67</span>,<span class="number">131</span>);</span><br><span class="line">	bresen(<span class="number">70</span>,<span class="number">95</span>,<span class="number">85</span>,<span class="number">95</span>);</span><br><span class="line">	bresen(<span class="number">70</span>,<span class="number">134</span>,<span class="number">85</span>,<span class="number">134</span>);</span><br><span class="line">	<span class="comment">//右耳朵，四个圆弧</span></span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">85</span>,<span class="number">131</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">70</span>,<span class="number">131</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">70</span>,<span class="number">98</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">85</span>,<span class="number">98</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//左耳朵，四条直线</span></span><br><span class="line">	bresen(<span class="number">-88</span>,<span class="number">98</span>,<span class="number">-88</span>,<span class="number">131</span>);</span><br><span class="line">	bresen(<span class="number">-67</span>,<span class="number">98</span>,<span class="number">-67</span>,<span class="number">131</span>);</span><br><span class="line">	bresen(<span class="number">-70</span>,<span class="number">95</span>,<span class="number">-85</span>,<span class="number">95</span>);</span><br><span class="line">	bresen(<span class="number">-70</span>,<span class="number">134</span>,<span class="number">-85</span>,<span class="number">134</span>);</span><br><span class="line">	<span class="comment">//左耳朵，四个圆弧</span></span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">-70</span>,<span class="number">131</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">-85</span>,<span class="number">131</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">-85</span>,<span class="number">98</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">3</span>,<span class="number">-70</span>,<span class="number">98</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//左胳膊衔接处</span></span><br><span class="line">	bresen(<span class="number">-73</span>,<span class="number">25</span>,<span class="number">-80</span>,<span class="number">25</span>);</span><br><span class="line">	bresen(<span class="number">-73</span>,<span class="number">43</span>,<span class="number">-80</span>,<span class="number">43</span>);</span><br><span class="line">	<span class="comment">//右胳膊衔接处</span></span><br><span class="line">	bresen(<span class="number">73</span>,<span class="number">25</span>,<span class="number">80</span>,<span class="number">25</span>);</span><br><span class="line">	bresen(<span class="number">73</span>,<span class="number">43</span>,<span class="number">80</span>,<span class="number">43</span>);</span><br><span class="line">	<span class="comment">//左大臂</span></span><br><span class="line">	dda(<span class="number">-108</span>,<span class="number">45</span>,<span class="number">-108</span>,<span class="number">0</span>);</span><br><span class="line">	dda(<span class="number">-81</span>,<span class="number">45</span>,<span class="number">-81</span>,<span class="number">0</span>);</span><br><span class="line">	dda(<span class="number">-108</span>,<span class="number">45</span>,<span class="number">-81</span>,<span class="number">45</span>);</span><br><span class="line">	dda(<span class="number">-108</span>,<span class="number">0</span>,<span class="number">-81</span>,<span class="number">0</span>);</span><br><span class="line">	<span class="comment">//右大臂</span></span><br><span class="line">	dda(<span class="number">108</span>,<span class="number">45</span>,<span class="number">108</span>,<span class="number">0</span>);</span><br><span class="line">	dda(<span class="number">81</span>,<span class="number">45</span>,<span class="number">81</span>,<span class="number">0</span>);</span><br><span class="line">	dda(<span class="number">108</span>,<span class="number">45</span>,<span class="number">81</span>,<span class="number">45</span>);</span><br><span class="line">	dda(<span class="number">108</span>,<span class="number">0</span>,<span class="number">81</span>,<span class="number">0</span>);</span><br><span class="line">	<span class="comment">//左中臂</span></span><br><span class="line">	bresen(<span class="number">-101</span>,<span class="number">0</span>,<span class="number">-101</span>,<span class="number">-4</span>);</span><br><span class="line">	bresen(<span class="number">-88</span>,<span class="number">0</span>,<span class="number">-88</span>,<span class="number">-4</span>);</span><br><span class="line">	<span class="comment">//右中臂</span></span><br><span class="line">	bresen(<span class="number">101</span>,<span class="number">0</span>,<span class="number">101</span>,<span class="number">-4</span>);</span><br><span class="line">	bresen(<span class="number">88</span>,<span class="number">0</span>,<span class="number">88</span>,<span class="number">-4</span>);</span><br><span class="line">	<span class="comment">//左小臂</span></span><br><span class="line">	dda(<span class="number">-108</span>,<span class="number">-4</span>,<span class="number">-108</span>,<span class="number">-37</span>);</span><br><span class="line">	dda(<span class="number">-81</span>,<span class="number">-4</span>,<span class="number">-81</span>,<span class="number">-37</span>);</span><br><span class="line">	dda(<span class="number">-108</span>,<span class="number">-4</span>,<span class="number">-81</span>,<span class="number">-4</span>);</span><br><span class="line">	dda(<span class="number">-108</span>,<span class="number">-37</span>,<span class="number">-81</span>,<span class="number">-37</span>);</span><br><span class="line">	<span class="comment">//右小臂</span></span><br><span class="line">	dda(<span class="number">108</span>,<span class="number">-4</span>,<span class="number">108</span>,<span class="number">-37</span>);</span><br><span class="line">	dda(<span class="number">81</span>,<span class="number">-4</span>,<span class="number">81</span>,<span class="number">-37</span>);</span><br><span class="line">	dda(<span class="number">108</span>,<span class="number">-4</span>,<span class="number">81</span>,<span class="number">-4</span>);</span><br><span class="line">	dda(<span class="number">108</span>,<span class="number">-37</span>,<span class="number">81</span>,<span class="number">-37</span>);</span><br><span class="line">	<span class="comment">//左手</span></span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//右手</span></span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">95</span>,<span class="number">-47</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">95</span>,<span class="number">-47</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">95</span>,<span class="number">-47</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">10</span>,<span class="number">95</span>,<span class="number">-47</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//左腿衔接处</span></span><br><span class="line">	dda(<span class="number">-43</span>,<span class="number">-62</span>,<span class="number">-43</span>,<span class="number">-69</span>);</span><br><span class="line">	dda(<span class="number">-25</span>,<span class="number">-62</span>,<span class="number">-25</span>,<span class="number">-69</span>);</span><br><span class="line">	<span class="comment">//右腿衔接处</span></span><br><span class="line">	dda(<span class="number">43</span>,<span class="number">-62</span>,<span class="number">43</span>,<span class="number">-69</span>);</span><br><span class="line">	dda(<span class="number">25</span>,<span class="number">-62</span>,<span class="number">25</span>,<span class="number">-69</span>);</span><br><span class="line">	<span class="comment">//左大腿，四条直线</span></span><br><span class="line">	bresen(<span class="number">-47</span>,<span class="number">-69</span>,<span class="number">-21</span>,<span class="number">-69</span>);</span><br><span class="line">	bresen(<span class="number">-47</span>,<span class="number">-117</span>,<span class="number">-21</span>,<span class="number">-117</span>);</span><br><span class="line">	bresen(<span class="number">-51</span>,<span class="number">-70</span>,<span class="number">-51</span>,<span class="number">-113</span>);</span><br><span class="line">	bresen(<span class="number">-17</span>,<span class="number">-70</span>,<span class="number">-17</span>,<span class="number">-113</span>);</span><br><span class="line">	<span class="comment">//左大腿，四条圆弧</span></span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">-21</span>,<span class="number">-73</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">-47</span>,<span class="number">-73</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">-47</span>,<span class="number">-113</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">-21</span>,<span class="number">-113</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//右大腿，四条直线</span></span><br><span class="line">	bresen(<span class="number">47</span>,<span class="number">-69</span>,<span class="number">21</span>,<span class="number">-69</span>);</span><br><span class="line">	bresen(<span class="number">47</span>,<span class="number">-117</span>,<span class="number">21</span>,<span class="number">-117</span>);</span><br><span class="line">	bresen(<span class="number">51</span>,<span class="number">-70</span>,<span class="number">51</span>,<span class="number">-113</span>);</span><br><span class="line">	bresen(<span class="number">17</span>,<span class="number">-70</span>,<span class="number">17</span>,<span class="number">-113</span>);</span><br><span class="line">	<span class="comment">//右大腿，四条圆弧</span></span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">47</span>,<span class="number">-73</span>,<span class="number">1</span>);</span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">21</span>,<span class="number">-73</span>,<span class="number">2</span>);</span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">21</span>,<span class="number">-113</span>,<span class="number">3</span>);</span><br><span class="line">	pnarcArc(<span class="number">4</span>,<span class="number">47</span>,<span class="number">-113</span>,<span class="number">4</span>);</span><br><span class="line">	<span class="comment">//左脚踝</span></span><br><span class="line">	dda(<span class="number">-43</span>,<span class="number">-118</span>,<span class="number">-43</span>,<span class="number">-125</span>);</span><br><span class="line">	dda(<span class="number">-25</span>,<span class="number">-118</span>,<span class="number">-25</span>,<span class="number">-125</span>);</span><br><span class="line">	<span class="comment">//右腿衔接处</span></span><br><span class="line">	dda(<span class="number">43</span>,<span class="number">-118</span>,<span class="number">43</span>,<span class="number">-125</span>);</span><br><span class="line">	dda(<span class="number">25</span>,<span class="number">-118</span>,<span class="number">25</span>,<span class="number">-125</span>);</span><br><span class="line">	<span class="comment">//左脚</span></span><br><span class="line">	bresen(<span class="number">-59</span>,<span class="number">-125</span>,<span class="number">-8</span>,<span class="number">-125</span>);</span><br><span class="line">	bresen(<span class="number">-59</span>,<span class="number">-137</span>,<span class="number">-8</span>,<span class="number">-137</span>);</span><br><span class="line">	bresen(<span class="number">-59</span>,<span class="number">-125</span>,<span class="number">-59</span>,<span class="number">-137</span>);</span><br><span class="line">	bresen(<span class="number">-8</span>,<span class="number">-125</span>,<span class="number">-8</span>,<span class="number">-137</span>);</span><br><span class="line">	<span class="comment">//右脚</span></span><br><span class="line">	bresen(<span class="number">59</span>,<span class="number">-125</span>,<span class="number">8</span>,<span class="number">-125</span>);</span><br><span class="line">	bresen(<span class="number">59</span>,<span class="number">-137</span>,<span class="number">8</span>,<span class="number">-137</span>);</span><br><span class="line">	bresen(<span class="number">59</span>,<span class="number">-125</span>,<span class="number">59</span>,<span class="number">-137</span>);</span><br><span class="line">	bresen(<span class="number">8</span>,<span class="number">-125</span>,<span class="number">8</span>,<span class="number">-137</span>);</span><br><span class="line">	<span class="comment">//刷新机器人</span></span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>其他的部分不再赘述，都十分基础。</p>
                  <h2 id="运行结果"><a href="#运行结果" class="headerlink" title="运行结果"></a>运行结果</h2>
                  <p>直接贴图如下 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/QQ截图20150413005949.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/QQ截图20150413005949.jpg" alt="QQ截图20150413005949"></a> 嘿嘿，我们直接用生成算法绘制的图形是不是更好看一些呢？</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>本节介绍了各种直线生成算法和圆弧生成算法，以及利用该算法重新绘制机器人，希望对大家有帮助！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-13 01:03:08" itemprop="dateCreated datePublished" datetime="2015-04-13T01:03:08+08:00">2015-04-13</time>
                </span>
                <span id="/1613.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例二之直线和圆弧的绘制" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>1.1k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>1 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1597.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> C/C++ <i class="label-arrow"></i>
                  </a>
                  <a href="/1597.html" class="post-title-link" itemprop="url">OpenGL绘图实例一之机器人的绘制</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>计算机图形学教材中有多种绘图方法，如直线的DDA算法、正负法、Bresenham算法和画圆弧的正负法和Bresenham算法。 同样，OpenGL类库也为我们提供了多种绘图方法，比如 glVertex2d，在这里我们用类库的方法来实现一个机器人的绘制。DDA等算法实现之后我们再替换类库的 glVertex2d 方法。</p>
                  <h2 id="绘制要求"><a href="#绘制要求" class="headerlink" title="绘制要求"></a>绘制要求</h2>
                  <p>利用 glVertex2d 和 glVertex2f 在二维平面上绘制如下的机器人。所以我们现在不需要三维的绘图方法，仅在平面绘制即可。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150410115231.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150410115231.jpg" alt="20150410115231"></a></p>
                  <h2 id="问题分析"><a href="#问题分析" class="headerlink" title="问题分析"></a>问题分析</h2>
                  <p>经过观察我们发现，图中包含了圆角矩形，矩形，直线，圆形，弧形，三角形，而对于 glVertex2d 的方法，只是定位好坐标点，然后利用坐标点连线或者形成封闭图形来绘制。所以，对于圆角矩形，弧形等，我们可以利用三角函数来求取坐标，并连线即可。</p>
                  <h3 id="1-圆角矩形的解决方案"><a href="#1-圆角矩形的解决方案" class="headerlink" title="1.圆角矩形的解决方案"></a>1.圆角矩形的解决方案</h3>
                  <p>对于圆角矩形，顾名思义每个角是由一个四分之一圆弧组成的。我们定义这个圆弧的半径为cirR，整个圆角矩形的宽度为width，高度为height，那么抛出四个角的圆弧，就会在圆角矩形内部形成一个小的矩形，我们定义它的宽高分别为w，h。另外，圆角矩形的中心点为(centerX,centerY)，如下图所示 （博主原创图，盗图必究） <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/11-e1428648703474.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/11-e1428648703474.png" alt=""></a> 在OpenGL中，可以定义一个绘图模式</p>
                  <figure class="highlight lisp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glBegin(<span class="name">GL_LINE_LOOP</span>)<span class="comment">;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>可以绘制封闭曲线，也就是说，我们所有调用的 glVertex2f 函数绘制的点均可以自动连接成一个封闭曲线。 所以，我们要做的就是找出圆角的坐标，利用 C++ 中的三角函数来计算右上角小圆所在的路径，我们设角度为X，所以圆弧的x方向延伸长度为 cirRcosX，在y方向延伸长度为 cirRsinX 对于右上角的四分之一圆弧，它所在的路径x坐标便是 centerX+w/2+cirRcosX = centerX+width/2-cirR+cirRcosX，同理，y路径坐标便是 centerY+h/2+cirRsinX = centerY+height/2-cirR+cirRsinX 当然对于其他的角，是加 w/2 还是减 w/2 就要看它所在的象限了。 另外对于精确度的问题，我们可以定义一个 divide 变量，将四分之一圆弧分成若干个点来绘制，当然分的份数越多，越精细，分的份数的值就是 divide，所以每次增加的弧度便是 PI/(2*divide) 方法最终实现如下，我们传入矩形的宽高，矩形中心的坐标，圆角半径即可进行绘制。</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画圆角矩形，传入矩形中心点坐标，矩形宽高，角半径</span></span><br><span class="line"><span class="built_in">void</span> glRoundRec(<span class="built_in">int</span> centerX,<span class="built_in">int</span> centerY,<span class="built_in">int</span> width,<span class="built_in">int</span> height,<span class="built_in">float</span> cirR)&#123;</span><br><span class="line">	<span class="comment">//二分之PI，一个象限的角度</span></span><br><span class="line">	<span class="built_in">float</span> PI_HALF = PI/<span class="number">2</span>;</span><br><span class="line">	<span class="comment">//划分程度,值越大画得越精细</span></span><br><span class="line">	<span class="built_in">float</span> divide=<span class="number">20.0</span>;</span><br><span class="line">	<span class="comment">//圆角矩形的坐标</span></span><br><span class="line">    <span class="built_in">float</span> tx,ty; </span><br><span class="line">	<span class="comment">//画封闭曲线</span></span><br><span class="line">    glBegin(GL_LINE_LOOP);</span><br><span class="line">	<span class="comment">//四个象限不同的操作符</span></span><br><span class="line">    <span class="built_in">int</span> opX[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>,<span class="number">1</span>&#125;;</span><br><span class="line">    <span class="built_in">int</span> opY[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>&#125;;</span><br><span class="line">	<span class="comment">//用来计数，从第一象限到第四象限</span></span><br><span class="line">    <span class="built_in">float</span> x=<span class="number">0</span>;</span><br><span class="line">	<span class="comment">//x自增时加的值</span></span><br><span class="line">	<span class="built_in">float</span> part=<span class="number">1</span>/divide;</span><br><span class="line">	<span class="comment">//计算内矩形宽高一半的数值</span></span><br><span class="line">	<span class="built_in">int</span> w=width/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="built_in">int</span> h=height/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="comment">//循环画线</span></span><br><span class="line">    <span class="keyword">for</span>(x=<span class="number">0</span>;x&lt;<span class="number">4</span>;x+=part)&#123;</span><br><span class="line">		<span class="comment">//求出弧度</span></span><br><span class="line">		<span class="built_in">float</span> rad = PI_HALF*x;</span><br><span class="line">		<span class="comment">//计算坐标值</span></span><br><span class="line">	    tx=cirR*cos(rad)+opX[(<span class="built_in">int</span>)x]*w+centerX;</span><br><span class="line">	    ty=cirR*sin(rad)+opY[(<span class="built_in">int</span>)x]*h+centerY;</span><br><span class="line">		<span class="comment">//传入坐标画线</span></span><br><span class="line">	    glVertex2f(tx,ty);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">   glEnd();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>例如我们可以调用</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">glRoundRec(<span class="number">0</span>,<span class="number">0</span>,<span class="number">146</span>,<span class="number">120</span>,<span class="number">15</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>可以绘制如下的圆角矩形 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/0150410150933-e1428649832943.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/0150410150933-e1428649832943.jpg" alt=""></a> </p>
                  <h3 id="2-圆弧的解决方案"><a href="#2-圆弧的解决方案" class="headerlink" title="2.圆弧的解决方案"></a>2.圆弧的解决方案</h3>
                  <p>对于圆弧的画法，我们也可以利用三角函数来解决，所以我们需要知道的参数就有半径，起始角度，还有圆弧的中心点。 代码实现如下</p>
                  <figure class="highlight cpp">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画弧线，相对偏移量XY，开始的弧度，结束的弧度，半径</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">glArc</span><span class="params">(<span class="keyword">double</span> x,<span class="keyword">double</span> y,<span class="keyword">double</span> start_angle,<span class="keyword">double</span> end_angle,<span class="keyword">double</span> radius)</span></span></span><br><span class="line"><span class="function"></span>&#123;   </span><br><span class="line">	<span class="comment">//开始绘制曲线</span></span><br><span class="line">	glBegin(GL_LINE_STRIP);</span><br><span class="line">	<span class="comment">//每次画增加的弧度</span></span><br><span class="line">	<span class="keyword">double</span> delta_angle=PI/<span class="number">180</span>;</span><br><span class="line">	<span class="comment">//画圆弧</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="keyword">double</span> i=start_angle;i&lt;=end_angle;i+=delta_angle)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//绝对定位加三角函数值</span></span><br><span class="line">		<span class="keyword">double</span> vx=x+radius * <span class="built_in">cos</span>(i);</span><br><span class="line">		<span class="keyword">double</span> vy=y+radius*<span class="built_in">sin</span>(i);</span><br><span class="line">		glVertex2d(vx,vy);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束绘画</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>至于画圆，我们只需要画一个弧度为0至2PI的圆弧即可。</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="comment">//画圆</span></span><br><span class="line">void gl<span class="constructor">Circle(<span class="params">double</span> <span class="params">x</span>, <span class="params">double</span> <span class="params">y</span>, <span class="params">double</span> <span class="params">radius</span>)</span>  </span><br><span class="line">&#123;  </span><br><span class="line">	<span class="comment">//画全圆</span></span><br><span class="line">    gl<span class="constructor">Arc(<span class="params">x</span>,<span class="params">y</span>,0,2<span class="operator">*</span>PI,<span class="params">radius</span>)</span>;  </span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <h3 id="3-其他图形的解决方案"><a href="#3-其他图形的解决方案" class="headerlink" title="3.其他图形的解决方案"></a>3.其他图形的解决方案</h3>
                  <p>对于直线，三角形，矩形等等，就没有那么复杂了，只需要绘制几个端点即可完成绘制。在此不再赘述。</p>
                  <h3 id="4-坐标的解决方案"><a href="#4-坐标的解决方案" class="headerlink" title="4.坐标的解决方案"></a>4.坐标的解决方案</h3>
                  <p>要画图，最重要的便是坐标点，在此博主对图上的某些坐标进行了测量，假设总宽度为300，对应的坐标值标注如下图所示，当然比例不一样的话，坐标会有成比例的变化，在此仅作参考。 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/robot-e1428650596530.png" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/robot-e1428650596530.png" alt="robot"></a> 在图中，某些点的坐标已做好标注，仅供参考。</p>
                  <h2 id="完整程序"><a href="#完整程序" class="headerlink" title="完整程序"></a>完整程序</h2>
                  <p>完整的画机器人的程序实现如下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">#include &lt;glut.h&gt;</span><br><span class="line">#include &lt;math.h&gt; </span><br><span class="line">#define PI <span class="number">3.1415926</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//画矩形，传入的是左下角XY坐标和右上角XY坐标</span></span><br><span class="line"><span class="built_in">void</span> glRect(<span class="built_in">int</span> leftX,<span class="built_in">int</span> leftY,<span class="built_in">int</span> rightX,<span class="built_in">int</span> rightY)&#123;</span><br><span class="line">	<span class="comment">//画封闭曲线</span></span><br><span class="line">    glBegin(GL_LINE_LOOP);</span><br><span class="line">	<span class="comment">//左下角</span></span><br><span class="line">	glVertex2d(leftX,leftY);</span><br><span class="line">	<span class="comment">//右下角</span></span><br><span class="line">	glVertex2d(rightX,leftY);</span><br><span class="line">	<span class="comment">//右上角</span></span><br><span class="line">	glVertex2d(rightX,rightY);</span><br><span class="line">	<span class="comment">//左上角</span></span><br><span class="line">	glVertex2d(leftX,rightY);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画圆角矩形，传入矩形宽高，角半径，矩形中心点坐标</span></span><br><span class="line"><span class="built_in">void</span> glRoundRec(<span class="built_in">int</span> centerX,<span class="built_in">int</span> centerY,<span class="built_in">int</span> width,<span class="built_in">int</span> height,<span class="built_in">float</span> cirR)&#123;</span><br><span class="line">	<span class="comment">//二分之PI，一个象限的角度</span></span><br><span class="line">	<span class="built_in">float</span> PI_HALF = PI/<span class="number">2</span>;</span><br><span class="line">	<span class="comment">//划分程度,值越大画得越精细</span></span><br><span class="line">	<span class="built_in">float</span> divide=<span class="number">20.0</span>;</span><br><span class="line">	<span class="comment">//圆角矩形的坐标</span></span><br><span class="line">    <span class="built_in">float</span> tx,ty; </span><br><span class="line">	<span class="comment">//画封闭曲线</span></span><br><span class="line">    glBegin(GL_LINE_LOOP);</span><br><span class="line">	<span class="comment">//四个象限不同的操作符</span></span><br><span class="line">    <span class="built_in">int</span> opX[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>,<span class="number">1</span>&#125;;</span><br><span class="line">    <span class="built_in">int</span> opY[<span class="number">4</span>]=&#123;<span class="number">1</span>,<span class="number">1</span>,<span class="number">-1</span>,<span class="number">-1</span>&#125;;</span><br><span class="line">	<span class="comment">//用来计数，从第一象限到第四象限</span></span><br><span class="line">    <span class="built_in">float</span> x=<span class="number">0</span>;</span><br><span class="line">	<span class="comment">//x自增时加的值</span></span><br><span class="line">	<span class="built_in">float</span> part=<span class="number">1</span>/divide;</span><br><span class="line">	<span class="comment">//计算内矩形宽高一半的数值</span></span><br><span class="line">	<span class="built_in">int</span> w=width/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="built_in">int</span> h=height/<span class="number">2</span>-cirR;</span><br><span class="line">	<span class="comment">//循环画线</span></span><br><span class="line">    <span class="keyword">for</span>(x=<span class="number">0</span>;x&lt;<span class="number">4</span>;x+=part)&#123;</span><br><span class="line">		<span class="comment">//求出弧度</span></span><br><span class="line">		<span class="built_in">float</span> rad = PI_HALF*x;</span><br><span class="line">		<span class="comment">//计算坐标值</span></span><br><span class="line">	    tx=cirR*cos(rad)+opX[(<span class="built_in">int</span>)x]*w+centerX;</span><br><span class="line">	    ty=cirR*sin(rad)+opY[(<span class="built_in">int</span>)x]*h+centerY;</span><br><span class="line">		<span class="comment">//传入坐标画线</span></span><br><span class="line">	    glVertex2f(tx,ty);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">   glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画弧线，相对偏移量XY，开始的弧度，结束的弧度，半径</span></span><br><span class="line"><span class="built_in">void</span> glArc(<span class="built_in">double</span> x,<span class="built_in">double</span> y,<span class="built_in">double</span> start_angle,<span class="built_in">double</span> end_angle,<span class="built_in">double</span> radius)</span><br><span class="line">&#123;   </span><br><span class="line">	<span class="comment">//开始绘制曲线</span></span><br><span class="line">	glBegin(GL_LINE_STRIP);</span><br><span class="line">	<span class="comment">//每次画增加的弧度</span></span><br><span class="line">	<span class="built_in">double</span> delta_angle=PI/<span class="number">180</span>;</span><br><span class="line">	<span class="comment">//画圆弧</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="built_in">double</span> i=start_angle;i&lt;=end_angle;i+=delta_angle)</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="comment">//绝对定位加三角函数值</span></span><br><span class="line">		<span class="built_in">double</span> vx=x+radius * cos(i);</span><br><span class="line">		<span class="built_in">double</span> vy=y+radius*sin(i);</span><br><span class="line">		glVertex2d(vx,vy);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="comment">//结束绘画</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//画圆</span></span><br><span class="line"><span class="built_in">void</span> glCircle(<span class="built_in">double</span> x, <span class="built_in">double</span> y, <span class="built_in">double</span> radius)  </span><br><span class="line">&#123;  </span><br><span class="line">	<span class="comment">//画全圆</span></span><br><span class="line">    glArc(x,y,<span class="number">0</span>,<span class="number">2</span>*PI,radius);  </span><br><span class="line">&#125;  </span><br><span class="line"></span><br><span class="line"><span class="comment">//画三角形，传入三个点的坐标</span></span><br><span class="line"><span class="built_in">void</span> glTri(<span class="built_in">int</span> x1,<span class="built_in">int</span> y1,<span class="built_in">int</span> x2,<span class="built_in">int</span> y2,<span class="built_in">int</span> x3,<span class="built_in">int</span> y3)&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    glBegin(GL_LINE_LOOP);</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	glVertex2d(x1,y1);</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	glVertex2d(x2,y2);</span><br><span class="line">	<span class="comment">//三点</span></span><br><span class="line">	glVertex2d(x3,y3);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//画线，传入两点坐标</span></span><br><span class="line"><span class="built_in">void</span> glLine(<span class="built_in">int</span> x1,<span class="built_in">int</span> y1,<span class="built_in">int</span> x2,<span class="built_in">int</span> y2)&#123;</span><br><span class="line">	<span class="comment">//画封闭线</span></span><br><span class="line">    glBegin(GL_LINE_STRIP);</span><br><span class="line">	<span class="comment">//一点</span></span><br><span class="line">	glVertex2d(x1,y1);</span><br><span class="line">	<span class="comment">//二点</span></span><br><span class="line">	glVertex2d(x2,y2);</span><br><span class="line">	<span class="comment">//结束画线</span></span><br><span class="line">	glEnd();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//函数用来画图</span></span><br><span class="line"><span class="built_in">void</span> display(<span class="built_in">void</span>)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">//GL_COLOR_BUFFER_BIT表示清除颜色</span></span><br><span class="line">	glClear(GL_COLOR_BUFFER_BIT);</span><br><span class="line">	<span class="comment">//设置画线颜色</span></span><br><span class="line">    glColor3f(<span class="number">0.5</span>,<span class="number">0.5</span>,<span class="number">0.5</span>);</span><br><span class="line">	<span class="comment">//画点大小</span></span><br><span class="line">	glPointSize(<span class="number">2</span>);</span><br><span class="line">	<span class="comment">//画圆角矩形，大肚子</span></span><br><span class="line">	glRoundRec(<span class="number">0</span>,<span class="number">0</span>,<span class="number">146</span>,<span class="number">120</span>,<span class="number">15</span>);</span><br><span class="line">	<span class="comment">//画圆，中间小圈</span></span><br><span class="line">	glCircle(<span class="number">0</span>,<span class="number">0</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//画矩形，脖子</span></span><br><span class="line">	glRect(<span class="number">-25</span>,<span class="number">60</span>,<span class="number">25</span>,<span class="number">76</span>);</span><br><span class="line">	<span class="comment">//画圆角矩形，大脸</span></span><br><span class="line">	glRoundRec(<span class="number">0</span>,<span class="number">113</span>,<span class="number">128</span>,<span class="number">74</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//两个眼睛</span></span><br><span class="line">	glCircle(<span class="number">-30</span>,<span class="number">111</span>,<span class="number">10</span>);</span><br><span class="line">	glCircle(<span class="number">30</span>,<span class="number">111</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//两条天线</span></span><br><span class="line">	glLine(<span class="number">-35</span>,<span class="number">150</span>,<span class="number">-35</span>,<span class="number">173</span>);</span><br><span class="line">	glLine(<span class="number">35</span>,<span class="number">150</span>,<span class="number">35</span>,<span class="number">173</span>);</span><br><span class="line">	<span class="comment">//圆角矩形，两个耳朵</span></span><br><span class="line">	glRoundRec(<span class="number">81</span>,<span class="number">115</span>,<span class="number">20</span>,<span class="number">34</span>,<span class="number">5</span>);</span><br><span class="line">	glRoundRec(<span class="number">-81</span>,<span class="number">115</span>,<span class="number">20</span>,<span class="number">34</span>,<span class="number">5</span>);</span><br><span class="line">	<span class="comment">//圆弧，画嘴</span></span><br><span class="line">	glArc(<span class="number">0</span>,<span class="number">133</span>,<span class="number">11</span>*PI/<span class="number">8</span>,<span class="number">13</span>*PI/<span class="number">8</span>,<span class="number">45</span>);</span><br><span class="line">	<span class="comment">//画三角，肚子里的三角</span></span><br><span class="line">	glTri(<span class="number">-30</span>,<span class="number">-15</span>,<span class="number">30</span>,<span class="number">-15</span>,<span class="number">0</span>,<span class="number">28</span>);</span><br><span class="line">	<span class="comment">//画矩形，胳膊连接处</span></span><br><span class="line">	glRect(<span class="number">-81</span>,<span class="number">43</span>,<span class="number">-73</span>,<span class="number">25</span>);</span><br><span class="line">	glRect(<span class="number">81</span>,<span class="number">43</span>,<span class="number">73</span>,<span class="number">25</span>);</span><br><span class="line">	<span class="comment">//画矩形，上臂</span></span><br><span class="line">	glRect(<span class="number">-108</span>,<span class="number">45</span>,<span class="number">-81</span>,<span class="number">0</span>);</span><br><span class="line">	glRect(<span class="number">108</span>,<span class="number">45</span>,<span class="number">81</span>,<span class="number">0</span>);</span><br><span class="line">	<span class="comment">//画矩形，中臂</span></span><br><span class="line">	glRect(<span class="number">-101</span>,<span class="number">0</span>,<span class="number">-88</span>,<span class="number">-4</span>);</span><br><span class="line">	glRect(<span class="number">101</span>,<span class="number">0</span>,<span class="number">88</span>,<span class="number">-4</span>);</span><br><span class="line">	<span class="comment">//画矩形，下臂</span></span><br><span class="line">	glRect(<span class="number">-108</span>,<span class="number">-4</span>,<span class="number">-81</span>,<span class="number">-37</span>);</span><br><span class="line">	glRect(<span class="number">108</span>,<span class="number">-4</span>,<span class="number">81</span>,<span class="number">-37</span>);</span><br><span class="line">	<span class="comment">//画圆形，手掌</span></span><br><span class="line">	glCircle(<span class="number">-95</span>,<span class="number">-47</span>,<span class="number">10</span>);</span><br><span class="line">	glCircle(<span class="number">95</span>,<span class="number">-47</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//画腿连接处</span></span><br><span class="line">	glRect(<span class="number">-41</span>,<span class="number">-62</span>,<span class="number">-21</span>,<span class="number">-66</span>);</span><br><span class="line">	glRect(<span class="number">41</span>,<span class="number">-62</span>,<span class="number">21</span>,<span class="number">-66</span>);</span><br><span class="line">	<span class="comment">//画圆角矩形，大长腿</span></span><br><span class="line">	glRoundRec(<span class="number">-32</span>,<span class="number">-92</span>,<span class="number">38</span>,<span class="number">52</span>,<span class="number">10</span>);</span><br><span class="line">	glRoundRec(<span class="number">32</span>,<span class="number">-92</span>,<span class="number">38</span>,<span class="number">52</span>,<span class="number">10</span>);</span><br><span class="line">	<span class="comment">//画矩形，脚踝</span></span><br><span class="line">	glRect(<span class="number">-41</span>,<span class="number">-125</span>,<span class="number">-21</span>,<span class="number">-117</span>);</span><br><span class="line">	glRect(<span class="number">41</span>,<span class="number">-125</span>,<span class="number">21</span>,<span class="number">-117</span>);</span><br><span class="line">	<span class="comment">//画矩形，大脚掌</span></span><br><span class="line">	glRect(<span class="number">-59</span>,<span class="number">-125</span>,<span class="number">-8</span>,<span class="number">-137</span>);</span><br><span class="line">	glRect(<span class="number">59</span>,<span class="number">-125</span>,<span class="number">8</span>,<span class="number">-137</span>);</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//保证前面的OpenGL命令立即执行，而不是让它们在缓冲区中等待 </span></span><br><span class="line">	glFlush();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//窗口大小变化时调用的函数</span></span><br><span class="line"><span class="built_in">void</span> ChangeSize(GLsizei w,GLsizei h)  </span><br><span class="line">&#123;  </span><br><span class="line">	<span class="comment">//避免高度为0</span></span><br><span class="line">    <span class="keyword">if</span>(h==<span class="number">0</span>) &#123;  </span><br><span class="line">        h=<span class="number">1</span>;  </span><br><span class="line">    &#125;  </span><br><span class="line">    <span class="comment">//定义视口大小，宽高一致  </span></span><br><span class="line">    glViewport(<span class="number">0</span>,<span class="number">0</span>,w,h);</span><br><span class="line">	<span class="built_in">int</span> half = <span class="number">200</span>;</span><br><span class="line">	<span class="comment">//重置坐标系统，使投影变换复位</span></span><br><span class="line">    glMatrixMode(GL_PROJECTION); </span><br><span class="line">	<span class="comment">//将当前的用户坐标系的原点移到了屏幕中心</span></span><br><span class="line">    glLoadIdentity();  </span><br><span class="line">   <span class="comment">//定义正交视域体  </span></span><br><span class="line">    <span class="keyword">if</span>(w&lt;h) &#123;</span><br><span class="line">		<span class="comment">//如果高度大于宽度，则将高度视角扩大，图形显示居中</span></span><br><span class="line">        glOrtho(-half,half,-half*h/w,half*h/w,-half,half);  </span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="comment">//如果宽度大于高度，则将宽度视角扩大，图形显示居中</span></span><br><span class="line">        glOrtho(-half*w/h,half*w/h,-half,half,-half,half);  </span><br><span class="line">    &#125;  </span><br><span class="line">  </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//程序入口</span></span><br><span class="line"><span class="built_in">int</span> main(<span class="built_in">int</span> argc, char *argv[])&#123;</span><br><span class="line">	<span class="comment">//对GLUT进行初始化，并处理所有的命令行参数</span></span><br><span class="line">	glutInit(&amp;argc, argv);</span><br><span class="line">	<span class="comment">//指定RGB颜色模式和单缓冲窗口</span></span><br><span class="line">	glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE);</span><br><span class="line">	<span class="comment">//定义窗口的位置</span></span><br><span class="line">	glutInitWindowPosition(<span class="number">100</span>, <span class="number">100</span>);</span><br><span class="line">	<span class="comment">//定义窗口的大小</span></span><br><span class="line">	glutInitWindowSize(<span class="number">400</span>, <span class="number">400</span>);</span><br><span class="line">	<span class="comment">//创建窗口，同时为之命名</span></span><br><span class="line">	glutCreateWindow(<span class="string">"OpenGL"</span>);</span><br><span class="line">	<span class="comment">//设置窗口清除颜色为白色</span></span><br><span class="line">	glClearColor(<span class="number">1.0f</span>,<span class="number">1.0f</span>,<span class="number">1.0f</span>,<span class="number">1.0f</span>);</span><br><span class="line">	<span class="comment">//参数为一个函数，绘图时这个函数就会被调用</span></span><br><span class="line">	glutDisplayFunc(&amp;display);</span><br><span class="line">	<span class="comment">//参数为一个函数，当窗口大小改变时会被调用</span></span><br><span class="line">	glutReshapeFunc(ChangeSize); </span><br><span class="line">	<span class="comment">//该函数让GLUT框架开始运行，所有设置的回调函数开始工作，直到用户终止程序为止</span></span><br><span class="line">	glutMainLoop();</span><br><span class="line">	<span class="comment">//程序返回</span></span><br><span class="line">	<span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行效果如下图所示 <a href="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150410152854.jpg" target="_blank" rel="noopener"><img src="http://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/20150410152854.jpg" alt="20150410152854"></a></p>
                  <h2 id="综述-1"><a href="#综述-1" class="headerlink" title="综述"></a>综述</h2>
                  <p>当然，这里直接调用了类库中的画线方法，而且用的是三角函数定位坐标。对于DDA算法等实现还没有进行替换，等实现DDA算法之后，再将绘制直线，圆弧等等的算法替换掉。同样可以实现机器人的绘制。 希望对大家有帮助！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-10 15:37:08" itemprop="dateCreated datePublished" datetime="2015-04-10T15:37:08+08:00">2015-04-10</time>
                </span>
                <span id="/1597.html" class="post-meta-item leancloud_visitors" data-flag-title="OpenGL绘图实例一之机器人的绘制" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>6.7k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>6 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1592.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> JavaScript <i class="label-arrow"></i>
                  </a>
                  <a href="/1592.html" class="post-title-link" itemprop="url">jQuery应用四之图片局部放大插件jQZoom</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>我们都见过淘宝上的宝贝，把鼠标放上去，会有局部放大的功能，现在我们可以利用一个叫jQZoom的插件，来实现图片的局部放大，让我们来感受一下</p>
                  <h2 id="在线演示"><a href="#在线演示" class="headerlink" title="在线演示"></a>在线演示</h2>
                  <p>我们首先来在线演示一下效果，然后我们说一下是怎样的实现，点开链接进行预览吧 <a href="http://res.cuiqingcai.com/jqplugins/jqzoom/" target="_blank" rel="noopener">在线预览</a></p>
                  <h2 id="插件文件"><a href="#插件文件" class="headerlink" title="插件文件"></a>插件文件</h2>
                  <ul>
                    <li><a href="http://res.cuiqingcai.com/jqplugins/jqzoom/js/jquery.min.js" target="_blank" rel="noopener">jquery.min.js</a></li>
                    <li><a href="http://res.cuiqingcai.com/jqplugins/jqzoom/js/jquery.jqzoom.js" target="_blank" rel="noopener">jquery.jqzoom.js</a></li>
                    <li><a href="http://res.cuiqingcai.com/jqplugins/jqzoom/css/jquery.jqzoom.css" target="_blank" rel="noopener">jquery.jqzoom.css</a></li>
                  </ul>
                  <p>其中包含了两个JS文件，一个是jQuery库，另一个就是jqzoom插件文件。另外还有一个css文件，主要作用是给图片放缩规定样式</p>
                  <h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>JQZoom放大镜<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.jqzoom.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"css/jquery.jqzoom.css"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line"><span class="css">           <span class="selector-tag">body</span>&#123;<span class="attribute">font-size</span>:<span class="number">13px</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-tag">span</span>&#123;<span class="attribute">color</span>:Red;<span class="attribute">font-size</span>:<span class="number">12px</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span>&#123;<span class="attribute">width</span>:<span class="number">260px</span>;<span class="attribute">border</span>:solid <span class="number">1px</span> <span class="number">#666</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divTitle</span>&#123;<span class="attribute">padding</span>:<span class="number">5px</span>;<span class="attribute">background-color</span>:<span class="number">#eee</span>;<span class="attribute">font-weight</span>:bold&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span>&#123;<span class="attribute">padding</span>:<span class="number">8px</span>;<span class="attribute">line-height</span>:<span class="number">1.6em</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span> <span class="selector-tag">img</span>&#123;<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#ccc</span>&#125;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">        $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            $(<span class="string">"#jqzoom"</span>).jqzoom( <span class="comment">//绑定图片放大插件jqzoom</span></span></span><br><span class="line">                 &#123;</span><br><span class="line">                     zoomWidth: 230,</span><br><span class="line">                     zoomHeight: 230,</span><br><span class="line"><span class="actionscript">                     position: <span class="string">'right'</span></span></span><br><span class="line">                 &#125;</span><br><span class="line">            );</span><br><span class="line">        &#125;);</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divFrame"</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divTitle"</span>&gt;</span></span><br><span class="line">              图片放大镜</span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divContent"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/bag.jpg"</span> <span class="attr">id</span>=<span class="string">"jqzoom"</span> <span class="attr">title</span>=<span class="string">"我的背包"</span>&gt;</span></span><br><span class="line">		         <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/bagsmall.jpg"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>Demo的代码如上所示，下面我们来分析一下代码调用</p>
                  <h2 id="代码分析"><a href="#代码分析" class="headerlink" title="代码分析"></a>代码分析</h2>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/bag.jpg"</span> <span class="attr">id</span>=<span class="string">"jqzoom"</span> <span class="attr">title</span>=<span class="string">"我的背包"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/bagsmall.jpg"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>最主要的部分如上所示，是一个超链接包含了一张图片。超链接的href是图片的大图，里面的img的src是小图。 利用插件时，只需要取到超链接这个元素，然后调用jqzoom方法就可以了</p>
                  <figure class="highlight yaml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="string">$("#jqzoom").jqzoom(</span> <span class="string">//绑定图片放大插件jqzoom</span></span><br><span class="line">	 <span class="string">&#123;</span></span><br><span class="line">		 <span class="attr">zoomWidth:</span> <span class="number">230</span><span class="string">,</span></span><br><span class="line">		 <span class="attr">zoomHeight:</span> <span class="number">230</span><span class="string">,</span></span><br><span class="line">		 <span class="attr">position:</span> <span class="string">'right'</span></span><br><span class="line">	 <span class="string">&#125;</span></span><br><span class="line"><span class="string">);</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>用法很简单，只需要传入一些参数就可以了。</p>
                  <h2 id="参数详解"><a href="#参数详解" class="headerlink" title="参数详解"></a>参数详解</h2>
                  <p><strong>下面是所有的参数详解</strong></p>
                  <ul>
                    <li>zoomType，默认值：’standard’，另一个值是’reverse’，是否将原图用半透明图层遮盖。</li>
                    <li>zoomWidth，默认值：200，放大窗口的宽度。</li>
                    <li>zoomHeight，默认值：200，放大窗口的高度。</li>
                    <li>xOffset，默认值：10，放大窗口相对于原图的x轴偏移值，可以为负。</li>
                    <li>yOffset，默认值：0，放大窗口相对于原图的y轴偏移值，可以为负。</li>
                    <li>position，默认值：’right’，放大窗口的位置，值还可以是:’right’ ,’left’ ,’top’ ,’bottom’。</li>
                    <li>lens，默认值：true，若为false，则不在原图上显示镜头。</li>
                    <li>imageOpacity，默认值：0.2，当zoomType的值为’reverse’时，这个参数用于指定遮罩的透明度。</li>
                    <li>title，默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值。</li>
                    <li>showEffect，默认值：’show’，显示放大窗口时的效果，值可以为: ‘show’ ,’fadein’。</li>
                    <li>hideEffect，默认值：’hide’，隐藏放大窗口时的效果: ‘hide’ ,’fadeout’。</li>
                    <li>fadeinSpeed，默认值：’fast’，放大窗口的渐显速度(选项: ‘fast’,’slow’,’medium’)。</li>
                    <li>fadeoutSpeed，默认值：’slow’，放大窗口的渐隐速度(选项: ‘fast’,’slow’,’medium’)。</li>
                    <li>showPreload，默认值：true，是否显示加载提示Loading zoom(选项: ‘true’,’false’)。</li>
                    <li>preloadText，默认值：’Loading zoom’，自定义加载提示文本。</li>
                    <li>preloadPosition，默认值：’center’，加载提示的位置，值也可以为’bycss’，以通过css指定位置。</li>
                  </ul>
                  <p>大家可以尝试设置上面的参数来达到想要的效果。</p>
                  <h2 id="综述-1"><a href="#综述-1" class="headerlink" title="综述"></a>综述</h2>
                  <p>通过jQZoom这个插件我们可以很方便地实现图片的局部放缩预览，希望对大家有帮助。</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-09 13:04:04" itemprop="dateCreated datePublished" datetime="2015-04-09T13:04:04+08:00">2015-04-09</time>
                </span>
                <span id="/1592.html" class="post-meta-item leancloud_visitors" data-flag-title="jQuery应用四之图片局部放大插件jQZoom" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>2.6k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>2 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1585.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> JavaScript <i class="label-arrow"></i>
                  </a>
                  <a href="/1585.html" class="post-title-link" itemprop="url">jQuery应用三之图片浏览插件LightBox</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>我们肯定用过QQ空间吧，看到QQ空间里面的照片，点一下就会出现一个悬浮框，显示放大后的图片，而且可以点击左右箭头来查看上一张和下一张照片，怎样？这种效果，想不想实现一下。 在这里，我们就引用一个jQuery插件来帮助我们完成这件事情，让我们拭目以待吧</p>
                  <h2 id="在线演示"><a href="#在线演示" class="headerlink" title="在线演示"></a>在线演示</h2>
                  <p>我们首先来在线演示一下效果，然后我们说一下是怎样的实现，点开链接进行预览吧 <a href="http://res.cuiqingcai.com/jqplugins/lightbox/" target="_blank" rel="noopener">在线预览</a></p>
                  <h2 id="插件文件"><a href="#插件文件" class="headerlink" title="插件文件"></a>插件文件</h2>
                  <ul>
                    <li><a href="http://res.cuiqingcai.com/jqplugins/lightbox/js/jquery-1.4.2.min.js" target="_blank" rel="noopener">jquery-1.4.2.min.js</a></li>
                    <li><a href="http://res.cuiqingcai.com/jqplugins/lightbox/js/jquery.notesforlightbox.js" target="_blank" rel="noopener">jquery.notesforlightbox.js</a></li>
                    <li><a href="http://res.cuiqingcai.com/jqplugins/lightbox/css/jquery.notesforlightbox.css" target="_blank" rel="noopener">jquery.notesforlightbox.css</a></li>
                  </ul>
                  <p>其中包含了两个JS文件，一个是jQuery库，另一个就是lightbox插件文件。另外还有一个css文件，主要作用是给图片浏览器规定样式</p>
                  <h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2>
                  <p>我们写一个DEMO，包含了六张图片，用一个ul列表呈现出来</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">&lt;!DOCTYPE&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>/&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>notesforlightbox实例<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery-1.4.2.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.notesforlightbox.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"css/jquery.notesforlightbox.css"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line"><span class="css">           <span class="selector-tag">body</span>&#123;<span class="attribute">font-size</span>:<span class="number">13px</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span>&#123;<span class="attribute">width</span>:<span class="number">380px</span>;<span class="attribute">border</span>:solid <span class="number">1px</span> <span class="number">#666</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divTitle</span>&#123;<span class="attribute">padding</span>:<span class="number">5px</span>;<span class="attribute">background-color</span>:<span class="number">#eee</span>;<span class="attribute">font-weight</span>:bold&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span>&#123;<span class="attribute">padding</span>:<span class="number">8px</span>;<span class="attribute">line-height</span>:<span class="number">1.6em</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span> <span class="selector-class">.divPics</span>&#123;<span class="attribute">background-color</span>: <span class="number">#777</span>;<span class="attribute">padding</span>: <span class="number">10px</span>;<span class="attribute">width</span>: <span class="number">344px</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span> <span class="selector-class">.divPics</span> <span class="selector-tag">ul</span>&#123;<span class="attribute">list-style</span>: none;<span class="attribute">padding</span>:<span class="number">0px</span>;<span class="attribute">margin</span>:<span class="number">0px</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span> <span class="selector-class">.divPics</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;<span class="attribute">display</span>: inline;&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span> <span class="selector-class">.divPics</span> <span class="selector-tag">ul</span> <span class="selector-tag">img</span>&#123;<span class="attribute">border</span>: <span class="number">5px</span> solid <span class="number">#444</span>;<span class="attribute">border-width</span>: <span class="number">5px</span>;<span class="attribute">width</span>:<span class="number">100px</span>;<span class="attribute">height</span>:<span class="number">100px</span>&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span> <span class="selector-class">.divPics</span> <span class="selector-tag">ul</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span>&#123;<span class="attribute">border</span>:<span class="number">5px</span> solid <span class="number">#fff</span>;<span class="attribute">border-width</span>: <span class="number">5px</span>;<span class="attribute">color</span>: <span class="number">#fff</span>;&#125;</span></span><br><span class="line"><span class="css">           <span class="selector-class">.divFrame</span> <span class="selector-class">.divContent</span> <span class="selector-class">.divPics</span> <span class="selector-tag">ul</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>&#123;<span class="attribute">color</span>: <span class="number">#fff</span>;&#125;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">        $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            $(<span class="string">'.divPics a'</span>).lightBox(&#123;</span></span><br><span class="line"><span class="actionscript">                overlayBgColor: <span class="string">"#666"</span>, <span class="comment">//浏览图片时的背景色</span></span></span><br><span class="line"><span class="actionscript">                overlayOpacity: <span class="number">0.5</span>, <span class="comment">//背景色的透明度</span></span></span><br><span class="line"><span class="actionscript">                containerResizeSpeed: <span class="number">600</span> <span class="comment">//图片切换时的速度;</span></span></span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divFrame"</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divTitle"</span>&gt;</span></span><br><span class="line">              我的相册</span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divContent"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divPics"</span>&gt;</span></span><br><span class="line">                   <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/img01.jpg"</span> <span class="attr">title</span>=<span class="string">"第1篇风景图片"</span>&gt;</span></span><br><span class="line">                             <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/img01.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /&gt;</span></span><br><span class="line">                      <span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/img02.jpg"</span> <span class="attr">title</span>=<span class="string">"第2篇风景图片"</span>&gt;</span></span><br><span class="line">                             <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/img02.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /&gt;</span></span><br><span class="line">                      <span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/img03.jpg"</span> <span class="attr">title</span>=<span class="string">"第3篇风景图片"</span>&gt;</span></span><br><span class="line">                             <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/img03.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /&gt;</span></span><br><span class="line">                      <span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/img04.jpg"</span> <span class="attr">title</span>=<span class="string">"第4篇风景图片"</span>&gt;</span></span><br><span class="line">                             <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/img04.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /&gt;</span></span><br><span class="line">                      <span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/img05.jpg"</span> <span class="attr">title</span>=<span class="string">"第5篇风景图片"</span>&gt;</span></span><br><span class="line">                             <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/img05.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /&gt;</span></span><br><span class="line">                      <span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"images/img06.jpg"</span> <span class="attr">title</span>=<span class="string">"第6篇风景图片"</span>&gt;</span></span><br><span class="line">                             <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/img06.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /&gt;</span></span><br><span class="line">                      <span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                   <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>其中images文件夹中存在了六张图片，其中每一个中的超链接的href链接是一张图片，超链接中还包含了img标签。这样可以保证点击图片的时候可以呼出一张大图。</p>
                  <h2 id="功能简析"><a href="#功能简析" class="headerlink" title="功能简析"></a>功能简析</h2>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            $(<span class="string">'.divPics a'</span>).lightBox(&#123;</span><br><span class="line">                overlayBgColor: <span class="string">"#666"</span>, <span class="comment">//浏览图片时的背景色</span></span><br><span class="line">                overlayOpacity: <span class="number">0.5</span>, <span class="comment">//背景色的透明度</span></span><br><span class="line">                containerResizeSpeed: <span class="number">600</span> <span class="comment">//图片切换时的速度;</span></span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们取到了所有的超链接元素，然后调用了lightBox方法，参数是一系列集合，在这里定义了</p>
                  <figure class="highlight dts">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="symbol">overlayBgColor:</span> <span class="string">"#666"</span>, <span class="comment">//浏览图片时的背景色</span></span><br><span class="line"><span class="symbol">overlayOpacity:</span> <span class="number">0.5</span>, <span class="comment">//背景色的透明度</span></span><br><span class="line"><span class="symbol">containerResizeSpeed:</span> <span class="number">600</span> <span class="comment">//图片切换时的速度;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>在这里给出所有的<strong>参数说明</strong></p>
                  <p>名称</p>
                  <p>默认值</p>
                  <p>说明</p>
                  <p>overlayBgColor</p>
                  <h1 id="000"><a href="#000" class="headerlink" title="000"></a>000</h1>
                  <p>背景色</p>
                  <p>overlayOpacity</p>
                  <p>0.8</p>
                  <p>背景色透明度</p>
                  <p>fixedNavigation</p>
                  <p>false</p>
                  <p>是否始终显示上一张、下一张按钮</p>
                  <p>imageLoading</p>
                  <p>images/lightbox-ico-loading.gif</p>
                  <p>加载图片时显示的图片</p>
                  <p>imageBtnPrev</p>
                  <p>images/lightbox-btn-prev.gif</p>
                  <p>上一张按钮的图片</p>
                  <p>imageBtnNext</p>
                  <p>images/lightbox-btn-next.gif</p>
                  <p>下一张按钮的图片</p>
                  <p>imageBtnClose</p>
                  <p>images/lightbox-btn-close.gif</p>
                  <p>关闭按钮的图片</p>
                  <p>imageBlank</p>
                  <p>images/lightbox-blank.gif</p>
                  <p>上一张、下一张按钮周围空白部分的图片（默认透明）</p>
                  <p>containerBorderSize</p>
                  <p>10</p>
                  <p>展示图片的边框宽度</p>
                  <p>containerResizeSpeed</p>
                  <p>400</p>
                  <p>展示过程切换的速度</p>
                  <p>txtImage</p>
                  <p>Image</p>
                  <p>页码辅助文字</p>
                  <p>txtOf</p>
                  <p>of</p>
                  <p>页码辅助文字</p>
                  <p>keyToClose</p>
                  <p>c</p>
                  <p>关闭展示的快捷键</p>
                  <p>keyToPrev</p>
                  <p>p</p>
                  <p>上一张的快捷键</p>
                  <p>keyToNext</p>
                  <p>n</p>
                  <p>下一张的快捷键</p>
                  <p>值得注意的地方是</p>
                  <p>imageLoading</p>
                  <p>‘images/lightbox-ico-loading.gif’</p>
                  <p>加载图片时显示的图片</p>
                  <p>imageBtnPrev</p>
                  <p>‘images/lightbox-btn-prev.gif’</p>
                  <p>上一张按钮的图片</p>
                  <p>imageBtnNext</p>
                  <p>‘images/lightbox-btn-next.gif’</p>
                  <p>下一张按钮的图片</p>
                  <p>imageBtnClose</p>
                  <p>‘images/lightbox-btn-close.gif’</p>
                  <p>关闭按钮的图片</p>
                  <p>这几张张图片，我们如果不定义，则会使用JS中默认的定义路径 在 <a href="http://res.cuiqingcai.com/jqplugins/lightbox/js/jquery.notesforlightbox.js" target="_blank" rel="noopener">jquery.notesforlightbox.js</a> 中，如下程序便实现了上一张图片和下一张图片等按钮的定义</p>
                  <figure class="highlight groovy">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="string">imageLoading:</span> <span class="string">'images/loading.gif'</span>,</span><br><span class="line"><span class="string">imageBtnPrev:</span> <span class="string">'images/prev.png'</span>,</span><br><span class="line"><span class="string">imageBtnNext:</span> <span class="string">'images/next.png'</span>,</span><br><span class="line"><span class="string">imageBtnClose:</span> <span class="string">'images/close.png'</span>,</span><br><span class="line"><span class="string">imageBlank:</span> <span class="string">'images/lightbox-blank.gif'</span>,</span><br><span class="line"><span class="string">imageBtnBottomPrev:</span> <span class="string">'images/btm_prev.gif'</span>,</span><br><span class="line"><span class="string">imageBtnBottomNext:</span> <span class="string">'images/btm_next.gif'</span>,</span><br><span class="line"><span class="string">imageBtnPlay:</span> <span class="string">'images/start.png'</span>,</span><br><span class="line"><span class="string">imageBtnStop:</span> <span class="string">'images/pause.png'</span>,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>所以，如果发现图片不正常显示可以检查一下这里的路径设置问题</p>
                  <h2 id="代码下载"><a href="#代码下载" class="headerlink" title="代码下载"></a>代码下载</h2>
                  <p><a href="https://github.com/cqcre/lightbox" target="_blank" rel="noopener">源码下载</a> 代码已部署在GitHub，可以下载查看</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>通过这个插件我们可以方便地实现图片的加载预览，效果也比较酷炫，希望对大家有帮助！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-07 22:59:58" itemprop="dateCreated datePublished" datetime="2015-04-07T22:59:58+08:00">2015-04-07</time>
                </span>
                <span id="/1585.html" class="post-meta-item leancloud_visitors" data-flag-title="jQuery应用三之图片浏览插件LightBox" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>4.3k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>4 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1573.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> JavaScript <i class="label-arrow"></i>
                  </a>
                  <a href="/1573.html" class="post-title-link" itemprop="url">jQuery应用二之邮箱下拉列表自动补全</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>我想大家一定见到过，在某个网站填写邮箱的时候，还没有填写完，就会出现一系列下拉列表，帮你自动补全邮箱的功能。现在我们就用jQuery来实现一下。 博主原创代码，如有代码写的不完善的地方还望大家多多指教。</p>
                  <h2 id="功能简述"><a href="#功能简述" class="headerlink" title="功能简述"></a>功能简述</h2>
                  <ul>
                    <li>填写邮箱名字，出现下拉列表，自动补全邮箱</li>
                    <li>点击上下按键，选取下拉列表邮箱</li>
                    <li>按回车键，选中列表内容，隐藏下拉列表</li>
                    <li>鼠标经过，下拉列表选项设置为高亮</li>
                    <li>鼠标点击，选中下拉列表选项，隐藏下拉列表</li>
                  </ul>
                  <h2 id="在线演示"><a href="#在线演示" class="headerlink" title="在线演示"></a>在线演示</h2>
                  <p>在此直接插入一个iframe进行演示 链接为 <a href="http://res.cuiqingcai.com/jqplugins/emailcomplete/" target="_blank" rel="noopener">在线演示</a></p>
                  <h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2>
                  <p>HTML代码很简单，我们就一个简单的输入框，然后一个ul标签，在内部可以放好多li标签。</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/main.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"css/style.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>/&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span>&gt;</span></span><br><span class="line">		   <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"email"</span> <span class="attr">id</span>=<span class="string">"email"</span> <span class="attr">placeholder</span>=<span class="string">"请输入您的邮箱"</span>/&gt;</span></span><br><span class="line">		   <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"list"</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是HTML代码</p>
                  <h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2>
                  <p>在CSS中，定义也比较简单，其中有一个 lilight 的 class，可以使背景变色，通过 remove 和 add 这个 class，我们可以轻松地实现下拉列表元素是否选中的区分。 CSS所有样式如下</p>
                  <figure class="highlight scss">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-class">.content</span> <span class="selector-tag">input</span>&#123;</span><br><span class="line">	<span class="attribute">padding</span>:<span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.list</span>&#123;</span><br><span class="line">	<span class="attribute">list-style</span>:none;</span><br><span class="line">	<span class="attribute">padding</span>:<span class="number">0px</span>;</span><br><span class="line">	<span class="attribute">margin</span>:<span class="number">0px</span>;</span><br><span class="line">	<span class="attribute">overflow</span>:hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.list</span> <span class="selector-tag">li</span>&#123;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#EEE</span>;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">180px</span>;</span><br><span class="line">	<span class="attribute">padding</span>:<span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">	<span class="attribute">margin</span>:<span class="number">0px</span>;</span><br><span class="line">	<span class="attribute">text-overflow</span>:ellipsis;  <span class="comment">//溢出时变为省略</span></span><br><span class="line">	<span class="attribute">overflow</span>:hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.lilight</span>&#123;</span><br><span class="line">	<span class="attribute">background-color</span>:<span class="number">#fafafa</span>;</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是CSS代码</p>
                  <h2 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h2>
                  <p>我们引入 jQuery 来实现对元素的操作，实现了按键和鼠标监听，代码如下</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="constructor">$(<span class="params">function</span>()</span>&#123;</span><br><span class="line">		<span class="comment">//声明所有的电子邮件变量</span></span><br><span class="line">		var mail=<span class="keyword">new</span> <span class="constructor">Array(<span class="string">"sina.com.cn"</span>,<span class="string">"126.com"</span>,<span class="string">"163.com"</span>,<span class="string">"gmail.com"</span>,<span class="string">"qq.com"</span>,<span class="string">"vip.qq.com"</span>,<span class="string">"hotmail.com"</span>,<span class="string">"sohu.com"</span>,<span class="string">"139.com"</span>,<span class="string">"vip.sina.com"</span>,<span class="string">"cuiqingcai.com"</span>)</span>;</span><br><span class="line">		<span class="comment">//生成一个个li，并加入到ul中</span></span><br><span class="line">		for(var i=<span class="number">0</span>;i&lt;mail.length;i++)&#123;</span><br><span class="line">			var liElement=<span class="constructor">$(<span class="string">"&lt;li class=\"autoli\"&gt;&lt;span class=\"ex\"&gt;&lt;/span&gt;&lt;span class=\"at\"&gt;@&lt;/span&gt;&lt;span class=\"tail\"&gt;"</span>+<span class="params">mail</span>[<span class="params">i</span>]+<span class="string">"&lt;/span&gt;&lt;/li&gt;"</span>)</span>;</span><br><span class="line">			liElement.append<span class="constructor">To(<span class="string">"ul.list"</span>)</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">//首先让list隐藏起来</span></span><br><span class="line">		<span class="constructor">$(<span class="string">"ul.list"</span>)</span>.hide<span class="literal">()</span>;</span><br><span class="line">		</span><br><span class="line">		<span class="constructor">$(<span class="string">"#email"</span>)</span>.keyup(<span class="keyword">function</span>(event)&#123;</span><br><span class="line">			<span class="comment">//键入的内容不是上下箭头和回车</span></span><br><span class="line">			<span class="keyword">if</span>(event.keyCode!=<span class="number">38</span>&amp;&amp;event.keyCode!=<span class="number">40</span>&amp;&amp;event.keyCode!=<span class="number">13</span>)&#123;</span><br><span class="line">				<span class="comment">//如果输入的值不是空或者不以空格开头</span></span><br><span class="line">				<span class="keyword">if</span>($.trim(<span class="constructor">$(<span class="params">this</span>)</span>.<span class="keyword">val</span><span class="literal">()</span>)!=<span class="string">""</span>&amp;&amp; $.trim(<span class="constructor">$(<span class="params">this</span>)</span>.<span class="keyword">val</span><span class="literal">()</span>).<span class="keyword">match</span>(/^@/)==null)&#123;</span><br><span class="line">					<span class="constructor">$(<span class="string">"ul.list"</span>)</span>.show<span class="literal">()</span>;</span><br><span class="line">					<span class="comment">//如果当前有已经高亮的下拉选项卡，那么将其移除</span></span><br><span class="line">					<span class="keyword">if</span>(<span class="constructor">$(<span class="string">"ul.list li:visible"</span>)</span>.has<span class="constructor">Class(<span class="string">"lilight"</span>)</span>)&#123;</span><br><span class="line">						<span class="constructor">$(<span class="string">"ul.list li"</span>)</span>.remove<span class="constructor">Class(<span class="string">"lilight"</span>)</span>;</span><br><span class="line">					&#125;</span><br><span class="line">					<span class="comment">//如果还存在下拉选项卡，那么将其高亮</span></span><br><span class="line">					<span class="keyword">if</span>(<span class="constructor">$(<span class="string">"ul.list li:visible"</span>)</span>)&#123;</span><br><span class="line">						<span class="constructor">$(<span class="string">"ul.list li:visible:eq(0)"</span>)</span>.add<span class="constructor">Class(<span class="string">"lilight"</span>)</span>;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="comment">//否则不进行显示</span></span><br><span class="line">					<span class="constructor">$(<span class="string">"ul.list"</span>)</span>.hide<span class="literal">()</span>;</span><br><span class="line">					<span class="constructor">$(<span class="string">"ul.list li"</span>)</span>.remove<span class="constructor">Class(<span class="string">"lilight"</span>)</span>;</span><br><span class="line">				&#125;</span><br><span class="line">				<span class="comment">//输入的内容还没有包括@符号</span></span><br><span class="line">				<span class="keyword">if</span>($.trim(<span class="constructor">$(<span class="params">this</span>)</span>.<span class="keyword">val</span><span class="literal">()</span>).<span class="keyword">match</span>(/.*@/)==null)&#123;</span><br><span class="line">					<span class="constructor">$(<span class="string">".list li .ex"</span>)</span>.text(<span class="constructor">$(<span class="params">this</span>)</span>.<span class="keyword">val</span><span class="literal">()</span>);</span><br><span class="line">				&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				<span class="comment">//输入的符号已经包含了@</span></span><br><span class="line">					var str = <span class="constructor">$(<span class="params">this</span>)</span>.<span class="keyword">val</span><span class="literal">()</span>;</span><br><span class="line">					var strs = str.split(<span class="string">"@"</span>);</span><br><span class="line">					<span class="constructor">$(<span class="string">".list li .ex"</span>)</span>.text(strs<span class="literal">[<span class="number">0</span>]</span>);</span><br><span class="line">					<span class="keyword">if</span>(<span class="constructor">$(<span class="params">this</span>)</span>.<span class="keyword">val</span><span class="literal">()</span>.length&gt;=strs<span class="literal">[<span class="number">0</span>]</span>.length+<span class="number">1</span>)&#123;</span><br><span class="line">						tail=str.substr(strs<span class="literal">[<span class="number">0</span>]</span>.length+<span class="number">1</span>);</span><br><span class="line">						<span class="constructor">$(<span class="string">".list li .tail"</span>)</span>.each(<span class="keyword">function</span><span class="literal">()</span>&#123;</span><br><span class="line">							<span class="comment">//如果数组中的元素是以文本中的后缀开头，那么就显示，否则不显示</span></span><br><span class="line">							<span class="keyword">if</span>(!(<span class="constructor">$(<span class="params">this</span>)</span>.text<span class="literal">()</span>.<span class="keyword">match</span>(tail)!=null&amp;&amp;<span class="constructor">$(<span class="params">this</span>)</span>.text<span class="literal">()</span>.index<span class="constructor">Of(<span class="params">tail</span>)</span>==<span class="number">0</span>))&#123;</span><br><span class="line">								<span class="comment">//隐藏其他的li</span></span><br><span class="line">								<span class="constructor">$(<span class="params">this</span>)</span>.parent<span class="literal">()</span>.hide<span class="literal">()</span>;</span><br><span class="line">							&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">								<span class="comment">//显示所在的li</span></span><br><span class="line">								<span class="constructor">$(<span class="params">this</span>)</span>.parent<span class="literal">()</span>.show<span class="literal">()</span>;</span><br><span class="line">							&#125;</span><br><span class="line">						&#125;);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">//按了回车时，将当前选中的元素写入到文本框中</span></span><br><span class="line">			<span class="keyword">if</span>(event.keyCode==<span class="number">13</span>)&#123;</span><br><span class="line">				<span class="constructor">$(<span class="string">"#email"</span>)</span>.<span class="keyword">val</span>(<span class="constructor">$(<span class="string">"ul.list li.lilight:visible"</span>)</span>.text<span class="literal">()</span>);</span><br><span class="line">				<span class="constructor">$(<span class="string">"ul.list"</span>)</span>.hide<span class="literal">()</span>;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//监听上下方向键</span></span><br><span class="line">		<span class="constructor">$(<span class="string">"#email"</span>)</span>.keydown(<span class="keyword">function</span>(event)&#123;</span><br><span class="line">			<span class="comment">//下方向键按下了</span></span><br><span class="line">			<span class="keyword">if</span>(event.keyCode==<span class="number">40</span>)&#123;</span><br><span class="line">				<span class="keyword">if</span>(<span class="constructor">$(<span class="string">"ul.list li"</span>)</span>.is(<span class="string">".lilight"</span>))&#123;</span><br><span class="line">					<span class="keyword">if</span>(<span class="constructor">$(<span class="string">"ul.list li.lilight"</span>)</span>.next<span class="constructor">All()</span>.is(<span class="string">"li:visible"</span>))&#123;</span><br><span class="line">						<span class="constructor">$(<span class="string">"ul.list li.lilight"</span>)</span>.remove<span class="constructor">Class(<span class="string">"lilight"</span>)</span>.next(<span class="string">"li"</span>).add<span class="constructor">Class(<span class="string">"lilight"</span>)</span>;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="comment">//下方向键按下了</span></span><br><span class="line">			<span class="keyword">if</span>(event.keyCode==<span class="number">38</span>)&#123;</span><br><span class="line">				<span class="keyword">if</span>(<span class="constructor">$(<span class="string">"ul.list li"</span>)</span>.is(<span class="string">".lilight"</span>))&#123;</span><br><span class="line">					<span class="keyword">if</span>(<span class="constructor">$(<span class="string">"ul.list li.lilight"</span>)</span>.prev<span class="constructor">All()</span>.is(<span class="string">"li:visible"</span>))&#123;</span><br><span class="line">						<span class="constructor">$(<span class="string">"ul.list li.lilight"</span>)</span>.remove<span class="constructor">Class(<span class="string">"lilight"</span>)</span>.prev(<span class="string">"li"</span>).add<span class="constructor">Class(<span class="string">"lilight"</span>)</span>;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//当鼠标点击某个下拉项时，选中该项，下拉列表隐藏</span></span><br><span class="line">		<span class="constructor">$(<span class="string">"ul.list li"</span>)</span>.click(<span class="keyword">function</span><span class="literal">()</span>&#123;</span><br><span class="line">			<span class="constructor">$(<span class="string">"#email"</span>)</span>.<span class="keyword">val</span>(<span class="constructor">$(<span class="params">this</span>)</span>.text<span class="literal">()</span>);</span><br><span class="line">			<span class="constructor">$(<span class="string">"ul.list"</span>)</span>.hide<span class="literal">()</span>;</span><br><span class="line">		&#125;);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//当鼠标划过某个下拉项时，选中该项，下拉列表隐藏</span></span><br><span class="line">		<span class="constructor">$(<span class="string">"ul.list li"</span>)</span>.hover(<span class="keyword">function</span><span class="literal">()</span>&#123;</span><br><span class="line">			<span class="constructor">$(<span class="string">"ul.list li"</span>)</span>.remove<span class="constructor">Class(<span class="string">"lilight"</span>)</span>;</span><br><span class="line">			<span class="constructor">$(<span class="params">this</span>)</span>.add<span class="constructor">Class(<span class="string">"lilight"</span>)</span>;</span><br><span class="line">		&#125;);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//当鼠标点击其他位置，下拉列表隐藏</span></span><br><span class="line">		<span class="constructor">$(<span class="params">document</span>)</span>.click(<span class="keyword">function</span><span class="literal">()</span>&#123;</span><br><span class="line">			<span class="constructor">$(<span class="string">"ul.list"</span>)</span>.hide<span class="literal">()</span>;</span><br><span class="line">		&#125;);			</span><br><span class="line">	&#125;);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是 jQuery 代码</p>
                  <h2 id="源码下载"><a href="#源码下载" class="headerlink" title="源码下载"></a>源码下载</h2>
                  <p><a href="https://github.com/cqcre/EmailComplete" target="_blank" rel="noopener">源码下载</a></p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>其实还有一个比较强大的插件，叫autocomplete，同样可以实现下拉列表的自动补全，功能更加完善，如果大家有兴趣可以去试一下。不过感觉最常用的就是邮箱自动补齐，而且直接用 jQuery 就可以比较方便地实现，所以博主就没有使用autocomplete插件，而是自己写了一下，一来练习一下，二来对这种功能的实现了解得更加透彻。 大家也可以尝试下，希望小伙伴们有帮助，加油！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-06 00:55:23" itemprop="dateCreated datePublished" datetime="2015-04-06T00:55:23+08:00">2015-04-06</time>
                </span>
                <span id="/1573.html" class="post-meta-item leancloud_visitors" data-flag-title="jQuery应用二之邮箱下拉列表自动补全" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>4.2k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>4 分钟</span>
                </span>
              </div>
            </article>
            <article itemscope itemtype="http://schema.org/Article" class="post-block index" lang="zh-CN">
              <link itemprop="mainEntityOfPage" href="https://cuiqingcai.com/1544.html">
              <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                <meta itemprop="image" content="/images/avatar.png">
                <meta itemprop="name" content="崔庆才">
                <meta itemprop="description" content="崔庆才的个人站点，记录生活的瞬间，分享学习的心得。">
              </span>
              <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                <meta itemprop="name" content="静觅">
              </span>
              <header class="post-header">
                <h2 class="post-title" itemprop="name headline">
                  <a class="label"> JavaScript <i class="label-arrow"></i>
                  </a>
                  <a href="/1544.html" class="post-title-link" itemprop="url">jQuery应用一之验证插件validate的使用</a>
                </h2>
              </header>
              <div class="post-body" itemprop="articleBody">
                <div class="thumb">
                  <img itemprop="contentUrl" class="random">
                </div>
                <div class="excerpt">
                  <p>
                  <h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2>
                  <p>validate是一个用来验证表单提交的插件，应用十分广泛，具有如下的几个功能</p>
                  <ul>
                    <li>自带了基本的验证规则</li>
                    <li>提供了丰富的验证信息提示功能</li>
                    <li>多种事件触发验证</li>
                    <li>自定义验证规则</li>
                  </ul>
                  <p>下面我们就来感受一下这个插件的强大之处吧</p>
                  <h2 id="插件下载"><a href="#插件下载" class="headerlink" title="插件下载"></a>插件下载</h2>
                  <p>在这里我们需要用到的插件文件有</p>
                  <ul>
                    <li><a href="http://res.cuiqingcai.com/js/jquery.validate.js" target="_blank" rel="noopener">jquery.validate.js</a> </li>
                    <li><a href="http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js" target="_blank" rel="noopener">jquery.validate.messages_cn.js</a></li>
                    <li><a href="http://res.cuiqingcai.com/js/jquery.min.js" target="_blank" rel="noopener">jquery.min.js</a></li>
                  </ul>
                  <p>一个是表单验证的主文件，另一个是设置中文提示的文件。</p>
                  <h2 id="实例引入"><a href="#实例引入" class="headerlink" title="实例引入"></a>实例引入</h2>
                  <p>我们先用一个小例子来感受一下使用 validate 插件的便捷之处，这个例子中加入了表单合法性验证和错误提示，代码如下</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">&lt;!DOCTYPE&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>validate验证插件<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.min.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"http://res.cuiqingcai.com/jqplugins/validate/style.css"</span>&gt;</span><span class="tag">&lt;/<span class="name">link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">        $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            $(<span class="string">"#frmV"</span>).validate(</span></span><br><span class="line">              &#123;</span><br><span class="line"><span class="actionscript">                  <span class="comment">/*自定义验证规则*/</span></span></span><br><span class="line">                  rules: &#123;</span><br><span class="line"><span class="actionscript">                      username: &#123; required: <span class="literal">true</span>, minlength: <span class="number">6</span> &#125;,</span></span><br><span class="line"><span class="actionscript">                      email: &#123; required: <span class="literal">true</span>, email: <span class="literal">true</span> &#125;</span></span><br><span class="line">                  &#125;,</span><br><span class="line"><span class="actionscript">                  <span class="comment">/*错误提示位置*/</span></span></span><br><span class="line"><span class="actionscript">                  errorPlacement: <span class="function"><span class="keyword">function</span><span class="params">(error, element)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                      error.appendTo(element.siblings(<span class="string">"span"</span>));</span></span><br><span class="line">                  &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            );</span><br><span class="line">        &#125;);</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"frmV"</span> <span class="attr">method</span>=<span class="string">"get"</span> <span class="attr">action</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divFrame"</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divTitle"</span>&gt;</span></span><br><span class="line">              请输入下列资料</span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divContent"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              用户名：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"username"</span> <span class="attr">name</span>=<span class="string">"username"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              邮箱：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"email"</span> <span class="attr">name</span>=<span class="string">"email"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divBtn"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"sbtUser"</span> <span class="attr">type</span>=<span class="string">"submit"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">value</span>=<span class="string">"提交"</span> <span class="attr">class</span>=<span class="string">"btn"</span> /&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果如下 在这里我们定义了 rules 来控制表单的合法性，通过 errorPlacement 来控制错误的输出位置。</p>
                  <h2 id="校验规则"><a href="#校验规则" class="headerlink" title="校验规则"></a>校验规则</h2>
                  <p>下面我们详细说一下关于rules的相关知识，将校检规则总结如下</p>
                  <p>序号</p>
                  <p>规则</p>
                  <p>描述</p>
                  <p>1</p>
                  <p>required:true</p>
                  <p>必须输入的字段。</p>
                  <p>2</p>
                  <p>remote:”check.php”</p>
                  <p>使用 ajax 方法调用 check.php 验证输入值。</p>
                  <p>3</p>
                  <p>email:true</p>
                  <p>必须输入正确格式的电子邮件。</p>
                  <p>4</p>
                  <p>url:true</p>
                  <p>必须输入正确格式的网址。</p>
                  <p>5</p>
                  <p>date:true</p>
                  <p>必须输入正确格式的日期。日期校验 ie6 出错，慎用。</p>
                  <p>6</p>
                  <p>dateISO:true</p>
                  <p>必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。</p>
                  <p>7</p>
                  <p>number:true</p>
                  <p>必须输入合法的数字（负数，小数）。</p>
                  <p>8</p>
                  <p>digits:true</p>
                  <p>必须输入整数。</p>
                  <p>9</p>
                  <p>creditcard:</p>
                  <p>必须输入合法的信用卡号。</p>
                  <p>10</p>
                  <p>equalTo:”#field”</p>
                  <p>输入值必须和 #field 相同。</p>
                  <p>11</p>
                  <p>accept:</p>
                  <p>输入拥有合法后缀名的字符串（上传文件的后缀）。</p>
                  <p>12</p>
                  <p>maxlength:5</p>
                  <p>输入长度最多是 5 的字符串（汉字算一个字符）。</p>
                  <p>13</p>
                  <p>minlength:10</p>
                  <p>输入长度最小是 10 的字符串（汉字算一个字符）。</p>
                  <p>14</p>
                  <p>rangelength:[5,10]</p>
                  <p>输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。</p>
                  <p>15</p>
                  <p>range:[5,10]</p>
                  <p>输入值必须介于 5 和 10 之间。</p>
                  <p>16</p>
                  <p>max:5</p>
                  <p>输入值不能大于 5。</p>
                  <p>17</p>
                  <p>min:10</p>
                  <p>输入值不能小于 10。</p>
                  <p>比如我们针对 email 这个表单就可以定义为</p>
                  <figure class="highlight yaml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="attr">email:</span> <span class="string">&#123;</span> <span class="attr">required:</span> <span class="literal">true</span><span class="string">,</span> <span class="attr">email:</span> <span class="literal">true</span> <span class="string">&#125;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>针对url的这个输入表单就可以定义为</p>
                  <figure class="highlight yaml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="attr">url:</span> <span class="string">&#123;</span> <span class="attr">required:</span> <span class="literal">true</span><span class="string">,</span> <span class="attr">url:</span> <span class="literal">true</span> <span class="string">&#125;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是校验规则的相关内容。</p>
                  <h2 id="消息提示"><a href="#消息提示" class="headerlink" title="消息提示"></a>消息提示</h2>
                  <p>在 jquery.validate.js 这个文件中，定义了默认的消息提示，不过它是英文的提示，默认的提示如下</p>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">messages</span>: &#123;</span><br><span class="line">    <span class="attribute">required</span>: <span class="string">"This field is required."</span>,</span><br><span class="line">    remote: <span class="string">"Please fix this field."</span>,</span><br><span class="line">    email: <span class="string">"Please enter a valid email address."</span>,</span><br><span class="line">    url: <span class="string">"Please enter a valid URL."</span>,</span><br><span class="line">    date: <span class="string">"Please enter a valid date."</span>,</span><br><span class="line">    dateISO: <span class="string">"Please enter a valid date (ISO)."</span>,</span><br><span class="line">    dateDE: <span class="string">"Bitte geben Sie ein gültiges Datum ein."</span>,</span><br><span class="line">    number: <span class="string">"Please enter a valid number."</span>,</span><br><span class="line">    numberDE: <span class="string">"Bitte geben Sie eine Nummer ein."</span>,</span><br><span class="line">    digits: <span class="string">"Please enter only digits"</span>,</span><br><span class="line">    creditcard: <span class="string">"Please enter a valid credit card number."</span>,</span><br><span class="line">    equalTo: <span class="string">"Please enter the same value again."</span>,</span><br><span class="line">    accept: <span class="string">"Please enter a value with a valid extension."</span>,</span><br><span class="line">    maxlength: $.validator.<span class="built_in">format</span>(<span class="string">"Please enter no more than &#123;0&#125; characters."</span>),</span><br><span class="line">    minlength: $.validator.<span class="built_in">format</span>(<span class="string">"Please enter at least &#123;0&#125; characters."</span>),</span><br><span class="line">    rangelength: $.validator.<span class="built_in">format</span>(<span class="string">"Please enter a value between &#123;0&#125; and &#123;1&#125; characters long."</span>),</span><br><span class="line">    range: $.validator.<span class="built_in">format</span>(<span class="string">"Please enter a value between &#123;0&#125; and &#123;1&#125;."</span>),</span><br><span class="line">    max: $.validator.<span class="built_in">format</span>(<span class="string">"Please enter a value less than or equal to &#123;0&#125;."</span>),</span><br><span class="line">    min: $.validator.<span class="built_in">format</span>(<span class="string">"Please enter a value greater than or equal to &#123;0&#125;."</span>)</span><br><span class="line">&#125;,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>比如，如果遇到 email 校验有问题，那么便会提示</p>
                  <figure class="highlight ebnf">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="attribute">Please enter a valid email address</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>不过我们通过引入 jquery.validate.messages_cn.js 这个文件，写入了如下代码，将默认的提示修改为中文</p>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">jQuery</span><span class="selector-class">.extend</span>(<span class="selector-tag">jQuery</span><span class="selector-class">.validator</span><span class="selector-class">.messages</span>, &#123;</span><br><span class="line">        <span class="attribute">required</span>: <span class="string">"必选字段"</span>,</span><br><span class="line">		remote: <span class="string">"请修正该字段"</span>,</span><br><span class="line">		email: <span class="string">"请输入正确格式的电子邮件"</span>,</span><br><span class="line">		url: <span class="string">"请输入合法的网址"</span>,</span><br><span class="line">		date: <span class="string">"请输入合法的日期"</span>,</span><br><span class="line">		dateISO: <span class="string">"请输入合法的日期 (ISO)."</span>,</span><br><span class="line">		number: <span class="string">"请输入合法的数字"</span>,</span><br><span class="line">		digits: <span class="string">"只能输入整数"</span>,</span><br><span class="line">		creditcard: <span class="string">"请输入合法的信用卡号"</span>,</span><br><span class="line">		equalTo: <span class="string">"请再次输入相同的值"</span>,</span><br><span class="line">		accept: <span class="string">"请输入拥有合法后缀名的字符串"</span>,</span><br><span class="line">		maxlength: jQuery.<span class="built_in">format</span>(<span class="string">"请输入一个长度最多是 &#123;0&#125; 的字符串"</span>),</span><br><span class="line">		minlength: jQuery.<span class="built_in">format</span>(<span class="string">"请输入一个长度最少是 &#123;0&#125; 的字符串"</span>),</span><br><span class="line">		rangelength: jQuery.<span class="built_in">format</span>(<span class="string">"请输入一个长度介于 &#123;0&#125; 和 &#123;1&#125; 之间的字符串"</span>),</span><br><span class="line">		range: jQuery.<span class="built_in">format</span>(<span class="string">"请输入一个介于 &#123;0&#125; 和 &#123;1&#125; 之间的值"</span>),</span><br><span class="line">		max: jQuery.<span class="built_in">format</span>(<span class="string">"请输入一个最大为 &#123;0&#125; 的值"</span>),</span><br><span class="line">		min: jQuery.<span class="built_in">format</span>(<span class="string">"请输入一个最小为 &#123;0&#125; 的值"</span>)</span><br><span class="line">&#125;);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>当然，以上的设置都是默认的提示，我们还可以通过 messages 来设置提示，举一个小例子，加入 messages 选项</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">&lt;!DOCTYPE&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>validate验证插件<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.min.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"http://res.cuiqingcai.com/jqplugins/validate/style.css"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">        $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            $(<span class="string">"#frmV"</span>).validate(</span></span><br><span class="line">              &#123;</span><br><span class="line"><span class="actionscript">                  <span class="comment">/*自定义验证规则*/</span></span></span><br><span class="line">                  rules: &#123;</span><br><span class="line"><span class="actionscript">					  username: &#123; required: <span class="literal">true</span>, minlength: <span class="number">6</span> &#125;,</span></span><br><span class="line"><span class="actionscript">                      email: &#123; required: <span class="literal">true</span>, email: <span class="literal">true</span> &#125;</span></span><br><span class="line">                  &#125;,</span><br><span class="line"><span class="actionscript">                  <span class="comment">/*错误提示位置*/</span></span></span><br><span class="line"><span class="actionscript">                  errorPlacement: <span class="function"><span class="keyword">function</span><span class="params">(error, element)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                      error.appendTo(element.siblings(<span class="string">"span"</span>));</span></span><br><span class="line">                  &#125;,</span><br><span class="line">				  messages: &#123;</span><br><span class="line"><span class="actionscript">					  username: &#123; required: <span class="string">"请输入姓名"</span>, minlength: <span class="string">"长度不可小于6"</span> &#125;,</span></span><br><span class="line"><span class="actionscript">                      email: &#123; required: <span class="string">"请输入电子邮件"</span>, email: <span class="string">"请输入正确格式"</span> &#125;</span></span><br><span class="line">				  &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            );</span><br><span class="line">        &#125;)</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"frmV"</span> <span class="attr">method</span>=<span class="string">"get"</span> <span class="attr">action</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divFrame"</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divTitle"</span>&gt;</span></span><br><span class="line">              请输入下列资料</span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divContent"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              用户名：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"username"</span> <span class="attr">name</span>=<span class="string">"username"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              邮箱：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"email"</span> <span class="attr">name</span>=<span class="string">"email"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divBtn"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"sbtUser"</span> <span class="attr">type</span>=<span class="string">"submit"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">value</span>=<span class="string">"提交"</span> <span class="attr">class</span>=<span class="string">"btn"</span> /&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>运行结果如下</p>
                  <h2 id="失败验证"><a href="#失败验证" class="headerlink" title="失败验证"></a>失败验证</h2>
                  <figure class="highlight xquery">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">  errorPlacement: <span class="keyword">function</span><span class="built_in">(error</span>, <span class="keyword">element</span>) &#123;</span><br><span class="line">error.appendTo(<span class="keyword">element</span>.siblings("span"));</span><br><span class="line">&#125;,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>我们用 errorPlacement 来处理验证失败后的处理，方法有两个参数，一个是error，一个是element。 其中error是字符串，保存了messages中返回的错误信息，element是验证失败的input元素。 比如上面这一句</p>
                  <figure class="highlight reasonml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">error.append<span class="constructor">To(<span class="params">element</span>.<span class="params">siblings</span>(<span class="string">"span"</span>)</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>就代表把错误加入到input元素同级的span元素中，从而在<span>标签内部显示错误的内容。 其他的情况我们可以灵活处理。</p>
                  <h2 id="成功验证"><a href="#成功验证" class="headerlink" title="成功验证"></a>成功验证</h2>
                  <p>有失败就有成功，在这里我们可以用一个函数来实现成功的验证</p>
                  <figure class="highlight subunit">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">success: </span>function(label) &#123;</span><br><span class="line">label.html("OK");</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>这里的label指的是发生错误时那个标签，就是上面例子中的span，通过html()方法可以实现标签内容的变化。例如下面的例子</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">&lt;!DOCTYPE&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>validate验证插件<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.min.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"http://res.cuiqingcai.com/jqplugins/validate/style.css"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">        $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            $(<span class="string">"#frmV"</span>).validate(</span></span><br><span class="line">              &#123;</span><br><span class="line"><span class="actionscript">                  <span class="comment">/*自定义验证规则*/</span></span></span><br><span class="line">                  rules: &#123;</span><br><span class="line"><span class="actionscript">					  username: &#123; required: <span class="literal">true</span>, minlength: <span class="number">6</span> &#125;,</span></span><br><span class="line"><span class="actionscript">                      email: &#123; required: <span class="literal">true</span>, email: <span class="literal">true</span> &#125;</span></span><br><span class="line">                  &#125;,</span><br><span class="line"><span class="actionscript">                  <span class="comment">/*错误提示位置*/</span></span></span><br><span class="line"><span class="actionscript">                  errorPlacement: <span class="function"><span class="keyword">function</span><span class="params">(error, element)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                      error.appendTo(element.siblings(<span class="string">"span"</span>));</span></span><br><span class="line">                  &#125;,</span><br><span class="line">				  messages: &#123;</span><br><span class="line"><span class="actionscript">					  username: &#123; required: <span class="string">"请输入姓名"</span>, minlength: <span class="string">"长度不可小于6"</span> &#125;,</span></span><br><span class="line"><span class="actionscript">                      email: &#123; required: <span class="string">"请输入电子邮件"</span>, email: <span class="string">"请输入正确格式"</span> &#125;</span></span><br><span class="line">				  &#125;,</span><br><span class="line"><span class="actionscript">				  success: <span class="function"><span class="keyword">function</span><span class="params">(label)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">					  label.html(<span class="string">"OK"</span>);</span></span><br><span class="line">				  &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            );</span><br><span class="line">        &#125;)</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"frmV"</span> <span class="attr">method</span>=<span class="string">"get"</span> <span class="attr">action</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divFrame"</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divTitle"</span>&gt;</span></span><br><span class="line">              请输入下列资料</span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divContent"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              用户名：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"username"</span> <span class="attr">name</span>=<span class="string">"username"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span>呵呵<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              邮箱：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"email"</span> <span class="attr">name</span>=<span class="string">"email"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divBtn"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"sbtUser"</span> <span class="attr">type</span>=<span class="string">"submit"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">value</span>=<span class="string">"提交"</span> <span class="attr">class</span>=<span class="string">"btn"</span> /&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>上面就是验证成功之后的效果，在相应提示的地方会显示OK。</p>
                  <h2 id="异步验证"><a href="#异步验证" class="headerlink" title="异步验证"></a>异步验证</h2>
                  <p>有时候我们需要用到异步验证，我们可以在rules中加入remote进行远程验证，例子如下</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="meta">&lt;!DOCTYPE&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>validate验证插件<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.min.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"http://res.cuiqingcai.com/jqplugins/validate/style.css"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">        $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            $(<span class="string">"#frmV"</span>).validate(</span></span><br><span class="line">				&#123;</span><br><span class="line"><span class="actionscript">					<span class="comment">/*自定义验证规则*/</span></span></span><br><span class="line">					rules: &#123; </span><br><span class="line"><span class="actionscript">						username: &#123; required: <span class="literal">true</span>, minlength: <span class="number">6</span> &#125;,</span></span><br><span class="line">						phone: &#123; </span><br><span class="line"><span class="actionscript">							required: <span class="literal">true</span>, </span></span><br><span class="line">							remote:&#123;</span><br><span class="line"><span class="actionscript">								url: <span class="string">"check_phone.php"</span>,     <span class="comment">//后台处理程序</span></span></span><br><span class="line"><span class="actionscript">								type: <span class="string">"post"</span>,               <span class="comment">//数据发送方式</span></span></span><br><span class="line"><span class="actionscript">								dataType: <span class="string">"json"</span>,           <span class="comment">//接受数据格式   </span></span></span><br><span class="line"><span class="actionscript">								data: &#123;                     <span class="comment">//要传递的数据</span></span></span><br><span class="line"><span class="actionscript">									phone: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">										<span class="keyword">return</span> $(<span class="string">"#phone"</span>).val();</span></span><br><span class="line">									&#125;</span><br><span class="line">								&#125;</span><br><span class="line">							&#125;</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;,</span><br><span class="line"><span class="actionscript">					<span class="comment">/*错误提示位置*/</span></span></span><br><span class="line"><span class="actionscript">					errorPlacement: <span class="function"><span class="keyword">function</span><span class="params">(error, element)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">					  error.appendTo(element.siblings(<span class="string">"span"</span>));</span></span><br><span class="line">					&#125;,</span><br><span class="line">					messages: &#123;</span><br><span class="line"><span class="actionscript">					  username: &#123; required: <span class="string">"请输入姓名"</span>, minlength: <span class="string">"长度不可小于6"</span> &#125;,</span></span><br><span class="line"><span class="actionscript">					  phone: &#123; required: <span class="string">"请输入电话"</span>, remote: <span class="string">"请输入正确格式"</span> &#125;</span></span><br><span class="line">					&#125;,</span><br><span class="line"><span class="actionscript">					success: <span class="function"><span class="keyword">function</span><span class="params">(label)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">					  label.html(<span class="string">"OK"</span>);</span></span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">            );</span><br><span class="line">        &#125;)</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"frmV"</span> <span class="attr">method</span>=<span class="string">"get"</span> <span class="attr">action</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divFrame"</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divTitle"</span>&gt;</span></span><br><span class="line">              请输入下列资料</span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divContent"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              用户名：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"username"</span> <span class="attr">name</span>=<span class="string">"username"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">              电话号码：<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"phone"</span> <span class="attr">name</span>=<span class="string">"phone"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"red"</span>&gt;</span>*<span class="tag">&lt;/<span class="name">font</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divBtn"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"sbtUser"</span> <span class="attr">type</span>=<span class="string">"submit"</span> </span></span><br><span class="line"><span class="tag">                     <span class="attr">value</span>=<span class="string">"提交"</span> <span class="attr">class</span>=<span class="string">"btn"</span> /&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>PHP处理程序，注意这里的返回值只能是true或者false，并且需要加引号。</p>
                  <figure class="highlight xml">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="php"><span class="meta">&lt;?php</span> </span></span><br><span class="line"><span class="php">	$phone = $_POST[<span class="string">'phone'</span>];</span></span><br><span class="line"><span class="php">	<span class="keyword">if</span>((strlen($phone) != <span class="number">11</span>) || !(preg_match(<span class="string">"/13[0123456789]&#123;1&#125;\d&#123;8&#125;|15[012356789]\d&#123;8&#125;|18[0123456789]\d&#123;8&#125;|17[0678]\d&#123;8&#125;|14[57]\d&#123;8&#125;/"</span>,$phone)))&#123;</span></span><br><span class="line"><span class="php">		<span class="keyword">echo</span> <span class="string">"false"</span>;</span></span><br><span class="line"><span class="php">	 &#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="php">		<span class="keyword">echo</span> <span class="string">"true"</span>;</span></span><br><span class="line"><span class="php">	 &#125;</span></span><br><span class="line"><span class="php"><span class="meta">?&gt;</span></span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>演示如下 上面就是进行ajax异步验证的处理方式</p>
                  <h2 id="自定义方法"><a href="#自定义方法" class="headerlink" title="自定义方法"></a>自定义方法</h2>
                  <p>有时候我们需要自定义一些验证方法，我们就需要用到addMethod方法，介绍如下 addMethod(name,method,message)方法</p>
                  <blockquote>
                    <p>参数name 是添加的方法的名字 参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法</p>
                  </blockquote>
                  <p>例如手机号码的验证如下</p>
                  <figure class="highlight angelscript">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$.validator.addMethod(<span class="string">"phone"</span>,function(value,element,params)&#123;</span><br><span class="line">		 <span class="keyword">if</span>((value.length != <span class="number">11</span>) || (!value.match(/^(<span class="number">13</span>[<span class="number">0</span><span class="number">-9</span>]|<span class="number">14</span>[<span class="number">5</span>|<span class="number">7</span>]|<span class="number">15</span>[<span class="number">0</span>|<span class="number">1</span>|<span class="number">2</span>|<span class="number">3</span>|<span class="number">5</span>|<span class="number">6</span>|<span class="number">7</span>|<span class="number">8</span>|<span class="number">9</span>]|<span class="number">17</span>[<span class="number">0</span>|<span class="number">6</span>|<span class="number">7</span>|<span class="number">8</span>]|<span class="number">18</span>[<span class="number">0</span><span class="number">-9</span>])\d&#123;<span class="number">8</span>&#125;$/)))&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">		 &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,<span class="string">"请输入正确的手机号"</span>);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>使用时如下</p>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">rules</span>:&#123;</span><br><span class="line">			<span class="attribute">phone</span>:&#123;</span><br><span class="line">				required:true,phone:true</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>有一个字段,只能输一个字母,范围是a-f,写法如下</p>
                  <figure class="highlight cs">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$.validator.addMethod(“af”,function(<span class="keyword">value</span>,element,<span class="keyword">params</span>)&#123;</span><br><span class="line">	<span class="keyword">if</span>(<span class="keyword">value</span>.length&gt;<span class="number">1</span>)&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span>(<span class="keyword">value</span>&gt;=<span class="keyword">params</span>[<span class="number">0</span>] &amp;&amp; <span class="keyword">value</span>&lt;=<span class="keyword">params</span>[<span class="number">1</span>])&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;,”必须是一个字母,且a-f”);</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>使用时如下</p>
                  <figure class="highlight css">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="selector-tag">rules</span>:&#123;</span><br><span class="line">			<span class="attribute">username</span>:&#123; af:[<span class="string">"a"</span>,<span class="string">"f"</span>] &#125;</span><br><span class="line">		&#125;,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>以上便是自定义验证方法的方式</p>
                  <h2 id="DeBug模式"><a href="#DeBug模式" class="headerlink" title="DeBug模式"></a>DeBug模式</h2>
                  <p>开启DeBug模式后，不会进行提交，只需要在代码中加入</p>
                  <figure class="highlight d">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="keyword">debug</span>:<span class="literal">true</span></span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>即可，这样不论怎样，都不会提交表单，对于调试十分有用。</p>
                  <h2 id="验证通过提交"><a href="#验证通过提交" class="headerlink" title="验证通过提交"></a>验证通过提交</h2>
                  <p>在上面的例子中，我们没有设置表单验证通过之后才提交，通过加入以下代码，可以实现验证之后才提交的效果</p>
                  <figure class="highlight fortran">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">submitHandler:<span class="function"><span class="keyword">function</span><span class="params">(form)</span></span>&#123; </span><br><span class="line"><span class="keyword">form</span>.submit();</span><br><span class="line">&#125;</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>通过设置上面的内容，我们就可以避免验证不成功submit跳转了</p>
                  <h2 id="忽略元素"><a href="#忽略元素" class="headerlink" title="忽略元素"></a>忽略元素</h2>
                  <p>有时候，我们想跳过某些元素不进行验证，可以通过加入如下代码来实现，举例如下</p>
                  <figure class="highlight avrasm">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="symbol">ignore:</span><span class="string">"input"</span>,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>忽略所有input元素</p>
                  <figure class="highlight avrasm">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="symbol">ignore:</span><span class="string">"#username"</span>,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>忽略id为username的元素</p>
                  <figure class="highlight avrasm">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line"><span class="symbol">ignore:</span><span class="string">".input"</span>,</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>忽略所有class为input的元素</p>
                  <h2 id="响应事件"><a href="#响应事件" class="headerlink" title="响应事件"></a>响应事件</h2>
                  <p>在默认的响应事件是 submit 提交事件，我们还可以通过设置来改变事件的响应，比如失去焦点时验证等等，举例如下 Onubmit：类型 Boolean，默认 true，指定是否提交时验证。</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="string">".selector"</span>).validate(&#123;   	<span class="attr">onsubmit</span>:<span class="literal">false</span> &#125;)</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="string">".selector"</span>).validate(&#123;     <span class="attr">onfocusout</span>:<span class="literal">false</span> &#125;)</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="string">".selector"</span>).validate(&#123;    <span class="attr">onkeyup</span>:<span class="literal">false</span> &#125;)</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="string">".selector"</span>).validate(&#123;    <span class="attr">onclick</span>:<span class="literal">false</span> &#125;)</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="string">".selector"</span>).validate(&#123;    <span class="attr">focusInvalid</span>:<span class="literal">false</span> &#125;)</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。</p>
                  <figure class="highlight arcade">
                    <table>
                      <tr>
                        <td class="gutter">
                          <pre><span class="line">1</span><br></pre>
                        </td>
                        <td class="code">
                          <pre><span class="line">$(<span class="string">".selector"</span>).validate(&#123;    <span class="attr">focusCleanup</span>:<span class="literal">true</span> &#125;)</span><br></pre>
                        </td>
                      </tr>
                    </table>
                  </figure>
                  <p>上面的响应事件一般不太常用，仅作了解即可。</p>
                  <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2>
                  <p>以上便是jQuery插件validate的用法，利用好这款插件对于编写将有极其大的帮助，希望大家能好好学习！</p>
                  </p>
                </div>
              </div>
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-user"></i>
                  </span>
                  <span class="post-meta-item-text">作者</span>
                  <span><a href="/authors/崔庆才" class="author" itemprop="url" rel="index">崔庆才</a></span>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>
                  <time title="创建时间：2015-04-04 20:50:38" itemprop="dateCreated datePublished" datetime="2015-04-04T20:50:38+08:00">2015-04-04</time>
                </span>
                <span id="/1544.html" class="post-meta-item leancloud_visitors" data-flag-title="jQuery应用一之验证插件validate的使用" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="fa fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
                <span class="post-meta-item" title="本文字数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-file-word"></i>
                  </span>
                  <span class="post-meta-item-text">本文字数：</span>
                  <span>13k</span>
                </span>
                <span class="post-meta-item" title="阅读时长">
                  <span class="post-meta-item-icon">
                    <i class="far fa-clock"></i>
                  </span>
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                  <span>12 分钟</span>
                </span>
              </div>
            </article>
            <script>
              document.querySelectorAll('.random').forEach(item => item.src = "https://picsum.photos/id/" + Math.floor(Math.random() * Math.floor(300)) + "/200/133")

            </script>
            <nav class="pagination">
              <a class="extend prev" rel="prev" href="/page/25/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/25/">25</a><span class="page-number current">26</span><a class="page-number" href="/page/27/">27</a><span class="space">&hellip;</span><a class="page-number" href="/page/31/">31</a><a class="extend next" rel="next" href="/page/27/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
            </nav>
          </div>
          <script>
            window.addEventListener('tabs:register', () =>
            {
              let
              {
                activeClass
              } = CONFIG.comments;
              if (CONFIG.comments.storage)
              {
                activeClass = localStorage.getItem('comments_active') || activeClass;
              }
              if (activeClass)
              {
                let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
                if (activeTab)
                {
                  activeTab.click();
                }
              }
            });
            if (CONFIG.comments.storage)
            {
              window.addEventListener('tabs:click', event =>
              {
                if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
                let commentClass = event.target.classList[1];
                localStorage.setItem('comments_active', commentClass);
              });
            }

          </script>
        </div>
        <div class="toggle sidebar-toggle">
          <span class="toggle-line toggle-line-first"></span>
          <span class="toggle-line toggle-line-middle"></span>
          <span class="toggle-line toggle-line-last"></span>
        </div>
        <aside class="sidebar">
          <div class="sidebar-inner">
            <ul class="sidebar-nav motion-element">
              <li class="sidebar-nav-toc"> 文章目录 </li>
              <li class="sidebar-nav-overview"> 站点概览 </li>
            </ul>
            <!--noindex-->
            <div class="post-toc-wrap sidebar-panel">
            </div>
            <!--/noindex-->
            <div class="site-overview-wrap sidebar-panel">
              <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
                <img class="site-author-image" itemprop="image" alt="崔庆才" src="/images/avatar.png">
                <p class="site-author-name" itemprop="name">崔庆才</p>
                <div class="site-description" itemprop="description">崔庆才的个人站点，记录生活的瞬间，分享学习的心得。</div>
              </div>
              <div class="site-state-wrap motion-element">
                <nav class="site-state">
                  <div class="site-state-item site-state-posts">
                    <a href="/archives/">
                      <span class="site-state-item-count">608</span>
                      <span class="site-state-item-name">日志</span>
                    </a>
                  </div>
                  <div class="site-state-item site-state-categories">
                    <a href="/categories/">
                      <span class="site-state-item-count">24</span>
                      <span class="site-state-item-name">分类</span></a>
                  </div>
                  <div class="site-state-item site-state-tags">
                    <a href="/tags/">
                      <span class="site-state-item-count">156</span>
                      <span class="site-state-item-name">标签</span></a>
                  </div>
                </nav>
              </div>
              <div class="links-of-author motion-element">
                <span class="links-of-author-item">
                  <a href="https://github.com/Germey" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;Germey" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
                </span>
                <span class="links-of-author-item">
                  <a href="mailto:cqc@cuiqingcai.com.com" title="邮件 → mailto:cqc@cuiqingcai.com.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>邮件</a>
                </span>
                <span class="links-of-author-item">
                  <a href="https://weibo.com/cuiqingcai" title="微博 → https:&#x2F;&#x2F;weibo.com&#x2F;cuiqingcai" rel="noopener" target="_blank"><i class="fab fa-weibo fa-fw"></i>微博</a>
                </span>
                <span class="links-of-author-item">
                  <a href="https://www.zhihu.com/people/Germey" title="知乎 → https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;Germey" rel="noopener" target="_blank"><i class="fa fa-magic fa-fw"></i>知乎</a>
                </span>
              </div>
            </div>
            <div style=" width: 100%;" class="sidebar-panel sidebar-panel-image sidebar-panel-active">
              <a href="https://tutorial.lengyue.video/?coupon=12ef4b1a-a3db-11ea-bb37-0242ac130002_cqx_850" target="_blank" rel="noopener">
                <img src="https://qiniu.cuiqingcai.com/bco2a.png" style=" width: 100%;">
              </a>
            </div>
            <div style=" width: 100%;" class="sidebar-panel sidebar-panel-image sidebar-panel-active">
              <a href="http://www.ipidea.net/?utm-source=cqc&utm-keyword=?cqc" target="_blank" rel="noopener">
                <img src="https://qiniu.cuiqingcai.com/0ywun.png" style=" width: 100%;">
              </a>
            </div>
            <div class="sidebar-panel sidebar-panel-tags sidebar-panel-active">
              <h4 class="name"> 标签云 </h4>
              <div class="content">
                <a href="/tags/2048/" style="font-size: 10px;">2048</a> <a href="/tags/API/" style="font-size: 10px;">API</a> <a href="/tags/Bootstrap/" style="font-size: 11.25px;">Bootstrap</a> <a href="/tags/CDN/" style="font-size: 10px;">CDN</a> <a href="/tags/CQC/" style="font-size: 10px;">CQC</a> <a href="/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/tags/CSS-%E5%8F%8D%E7%88%AC%E8%99%AB/" style="font-size: 10px;">CSS 反爬虫</a> <a href="/tags/CV/" style="font-size: 10px;">CV</a> <a href="/tags/Django/" style="font-size: 10px;">Django</a> <a href="/tags/Eclipse/" style="font-size: 11.25px;">Eclipse</a> <a href="/tags/FTP/" style="font-size: 10px;">FTP</a> <a href="/tags/Git/" style="font-size: 10px;">Git</a> <a href="/tags/GitHub/" style="font-size: 13.75px;">GitHub</a> <a href="/tags/HTML5/" style="font-size: 10px;">HTML5</a> <a href="/tags/Hexo/" style="font-size: 10px;">Hexo</a> <a href="/tags/IT/" style="font-size: 10px;">IT</a> <a href="/tags/JSP/" style="font-size: 10px;">JSP</a> <a href="/tags/JavaScript/" style="font-size: 10px;">JavaScript</a> <a href="/tags/K8s/" style="font-size: 10px;">K8s</a> <a href="/tags/LOGO/" style="font-size: 10px;">LOGO</a> <a href="/tags/Linux/" style="font-size: 10px;">Linux</a> <a href="/tags/MIUI/" style="font-size: 10px;">MIUI</a> <a href="/tags/MongoDB/" style="font-size: 10px;">MongoDB</a> <a href="/tags/Mysql/" style="font-size: 10px;">Mysql</a> <a href="/tags/NBA/" style="font-size: 10px;">NBA</a> <a href="/tags/PHP/" style="font-size: 11.25px;">PHP</a> <a href="/tags/PS/" style="font-size: 10px;">PS</a> <a href="/tags/Pathlib/" style="font-size: 10px;">Pathlib</a> <a href="/tags/PhantomJS/" style="font-size: 10px;">PhantomJS</a> <a href="/tags/Python/" style="font-size: 15px;">Python</a> <a href="/tags/Python3/" style="font-size: 12.5px;">Python3</a> <a href="/tags/Pythonic/" style="font-size: 10px;">Pythonic</a> <a href="/tags/QQ/" style="font-size: 10px;">QQ</a> <a href="/tags/Redis/" style="font-size: 10px;">Redis</a> <a href="/tags/SAE/" style="font-size: 10px;">SAE</a> <a href="/tags/SSH/" style="font-size: 10px;">SSH</a> <a href="/tags/SVG/" style="font-size: 10px;">SVG</a> <a href="/tags/Scrapy/" style="font-size: 10px;">Scrapy</a> <a href="/tags/Scrapy-redis/" style="font-size: 10px;">Scrapy-redis</a> <a href="/tags/Scrapy%E5%88%86%E5%B8%83%E5%BC%8F/" style="font-size: 10px;">Scrapy分布式</a> <a href="/tags/Selenium/" style="font-size: 10px;">Selenium</a> <a href="/tags/TKE/" style="font-size: 10px;">TKE</a> <a href="/tags/Ubuntu/" style="font-size: 11.25px;">Ubuntu</a> <a href="/tags/VS-Code/" style="font-size: 10px;">VS Code</a> <a href="/tags/Vs-Code/" style="font-size: 10px;">Vs Code</a> <a href="/tags/Vue/" style="font-size: 11.25px;">Vue</a> <a href="/tags/Webpack/" style="font-size: 10px;">Webpack</a> <a href="/tags/Windows/" style="font-size: 10px;">Windows</a> <a href="/tags/Winpcap/" style="font-size: 10px;">Winpcap</a> <a href="/tags/WordPress/" style="font-size: 13.75px;">WordPress</a> <a href="/tags/Youtube/" style="font-size: 11.25px;">Youtube</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/ansible/" style="font-size: 10px;">ansible</a> <a href="/tags/cocos2d-x/" style="font-size: 10px;">cocos2d-x</a> <a href="/tags/e6/" style="font-size: 10px;">e6</a> <a href="/tags/fitvids/" style="font-size: 10px;">fitvids</a> <a href="/tags/git/" style="font-size: 11.25px;">git</a> <a href="/tags/json/" style="font-size: 10px;">json</a> <a href="/tags/js%E9%80%86%E5%90%91/" style="font-size: 10px;">js逆向</a> <a href="/tags/kubernetes/" style="font-size: 10px;">kubernetes</a> <a href="/tags/log/" style="font-size: 10px;">log</a> <a href="/tags/logging/" style="font-size: 10px;">logging</a> <a href="/tags/matlab/" style="font-size: 11.25px;">matlab</a> <a href="/tags/python/" style="font-size: 20px;">python</a> <a href="/tags/pytube/" style="font-size: 11.25px;">pytube</a> <a href="/tags/pywin32/" style="font-size: 10px;">pywin32</a> <a href="/tags/style/" style="font-size: 10px;">style</a> <a href="/tags/tomcat/" style="font-size: 10px;">tomcat</a> <a href="/tags/ubuntu/" style="font-size: 10px;">ubuntu</a> <a href="/tags/uwsgi/" style="font-size: 10px;">uwsgi</a> <a href="/tags/vsftpd/" style="font-size: 10px;">vsftpd</a> <a href="/tags/wamp/" style="font-size: 10px;">wamp</a> <a href="/tags/wineQQ/" style="font-size: 10px;">wineQQ</a> <a href="/tags/%E4%B8%83%E7%89%9B/" style="font-size: 11.25px;">七牛</a> <a href="/tags/%E4%B8%8A%E6%B5%B7/" style="font-size: 10px;">上海</a> <a href="/tags/%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/" style="font-size: 10px;">个人网站</a> <a href="/tags/%E4%B8%BB%E9%A2%98/" style="font-size: 10px;">主题</a> <a href="/tags/%E4%BA%91%E4%BA%A7%E5%93%81/" style="font-size: 10px;">云产品</a> <a href="/tags/%E4%BA%91%E5%AD%98%E5%82%A8/" style="font-size: 10px;">云存储</a> <a href="/tags/%E4%BA%AC%E4%B8%9C%E4%BA%91/" style="font-size: 10px;">京东云</a> <a href="/tags/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/" style="font-size: 12.5px;">人工智能</a> <a href="/tags/%E4%BB%A3%E7%90%86/" style="font-size: 10px;">代理</a> <a href="/tags/%E4%BB%A3%E7%A0%81/" style="font-size: 10px;">代码</a> <a href="/tags/%E4%BB%A3%E7%A0%81%E5%88%86%E4%BA%AB%E5%9B%BE/" style="font-size: 10px;">代码分享图</a> <a href="/tags/%E4%BC%98%E5%8C%96/" style="font-size: 10px;">优化</a> <a href="/tags/%E4%BD%8D%E8%BF%90%E7%AE%97/" style="font-size: 10px;">位运算</a> <a href="/tags/%E5%85%AC%E4%BC%97%E5%8F%B7/" style="font-size: 10px;">公众号</a> <a href="/tags/%E5%88%86%E4%BA%AB/" style="font-size: 10px;">分享</a> <a href="/tags/%E5%88%86%E5%B8%83%E5%BC%8F/" style="font-size: 10px;">分布式</a> <a href="/tags/%E5%88%9B%E4%B8%9A/" style="font-size: 10px;">创业</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 12.5px;">前端</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 10px;">博客</a> <a href="/tags/%E5%8E%9F%E7%94%9FAPP/" style="font-size: 10px;">原生APP</a> <a href="/tags/%E5%8F%8D%E7%88%AC%E8%99%AB/" style="font-size: 12.5px;">反爬虫</a> <a href="/tags/%E5%91%BD%E4%BB%A4/" style="font-size: 10px;">命令</a> <a href="/tags/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/" style="font-size: 10px;">响应式布局</a> <a href="/tags/%E5%9E%83%E5%9C%BE%E9%82%AE%E4%BB%B6/" style="font-size: 10px;">垃圾邮件</a> <a href="/tags/%E5%9F%9F%E5%90%8D%E7%BB%91%E5%AE%9A/" style="font-size: 10px;">域名绑定</a> <a href="/tags/%E5%A4%8D%E7%9B%98/" style="font-size: 10px;">复盘</a> <a href="/tags/%E5%A4%A7%E4%BC%97%E7%82%B9%E8%AF%84/" style="font-size: 10px;">大众点评</a> <a href="/tags/%E5%AD%97%E4%BD%93%E5%8F%8D%E7%88%AC%E8%99%AB/" style="font-size: 10px;">字体反爬虫</a> <a href="/tags/%E5%AD%97%E7%AC%A6%E9%97%AE%E9%A2%98/" style="font-size: 10px;">字符问题</a> <a href="/tags/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/" style="font-size: 10px;">学习方法</a> <a href="/tags/%E5%AE%89%E5%8D%93/" style="font-size: 10px;">安卓</a> <a href="/tags/%E5%AE%9E%E7%94%A8/" style="font-size: 10px;">实用</a> <a href="/tags/%E5%B0%81%E9%9D%A2/" style="font-size: 10px;">封面</a> <a href="/tags/%E5%B4%94%E5%BA%86%E6%89%8D/" style="font-size: 18.75px;">崔庆才</a> <a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 12.5px;">工具</a> <a href="/tags/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/" style="font-size: 10px;">开发工具</a> <a href="/tags/%E5%BE%AE%E8%BD%AF/" style="font-size: 10px;">微软</a> <a href="/tags/%E6%80%9D%E8%80%83/" style="font-size: 10px;">思考</a> <a href="/tags/%E6%89%8B%E6%9C%BA%E8%AE%BF%E9%97%AE/" style="font-size: 10px;">手机访问</a> <a href="/tags/%E6%95%99%E7%A8%8B/" style="font-size: 10px;">教程</a> <a href="/tags/%E6%95%99%E8%82%B2/" style="font-size: 10px;">教育</a> <a href="/tags/%E6%96%B0%E4%B9%A6/" style="font-size: 12.5px;">新书</a> <a href="/tags/%E6%96%B9%E6%B3%95%E8%AE%BA/" style="font-size: 10px;">方法论</a> <a href="/tags/%E6%97%85%E6%B8%B8/" style="font-size: 10px;">旅游</a> <a href="/tags/%E6%97%A5%E5%BF%97/" style="font-size: 10px;">日志</a> <a href="/tags/%E6%9A%97%E6%97%B6%E9%97%B4/" style="font-size: 10px;">暗时间</a> <a href="/tags/%E6%9D%9C%E5%85%B0%E7%89%B9/" style="font-size: 11.25px;">杜兰特</a> <a href="/tags/%E6%A1%8C%E9%9D%A2/" style="font-size: 10px;">桌面</a> <a href="/tags/%E6%AD%8C%E5%8D%95/" style="font-size: 10px;">歌单</a> <a href="/tags/%E6%B1%9F%E5%8D%97/" style="font-size: 10px;">江南</a> <a href="/tags/%E6%B8%B8%E6%88%8F/" style="font-size: 10px;">游戏</a> <a href="/tags/%E7%84%A6%E8%99%91/" style="font-size: 10px;">焦虑</a> <a href="/tags/%E7%88%AC%E8%99%AB/" style="font-size: 16.25px;">爬虫</a> <a href="/tags/%E7%88%AC%E8%99%AB%E4%B9%A6%E7%B1%8D/" style="font-size: 11.25px;">爬虫书籍</a> <a href="/tags/%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F/" style="font-size: 10px;">环境变量</a> <a href="/tags/%E7%94%9F%E6%B4%BB%E7%AC%94%E8%AE%B0/" style="font-size: 10px;">生活笔记</a> <a href="/tags/%E7%99%BB%E5%BD%95/" style="font-size: 10px;">登录</a> <a href="/tags/%E7%9F%A5%E4%B9%8E/" style="font-size: 10px;">知乎</a> <a href="/tags/%E7%9F%AD%E4%BF%A1/" style="font-size: 10px;">短信</a> <a href="/tags/%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81/" style="font-size: 10px;">短信验证码</a> <a href="/tags/%E7%AC%94%E8%AE%B0%E8%BD%AF%E4%BB%B6/" style="font-size: 10px;">笔记软件</a> <a href="/tags/%E7%AF%AE%E7%BD%91/" style="font-size: 10px;">篮网</a> <a href="/tags/%E7%BA%B8%E5%BC%A0/" style="font-size: 10px;">纸张</a> <a href="/tags/%E7%BB%84%E4%BB%B6/" style="font-size: 10px;">组件</a> <a href="/tags/%E7%BD%91%E7%AB%99/" style="font-size: 10px;">网站</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/" style="font-size: 11.25px;">网络爬虫</a> <a href="/tags/%E7%BE%8E%E5%AD%A6/" style="font-size: 10px;">美学</a> <a href="/tags/%E8%82%89%E5%A4%B9%E9%A6%8D/" style="font-size: 10px;">肉夹馍</a> <a href="/tags/%E8%85%BE%E8%AE%AF%E4%BA%91/" style="font-size: 10px;">腾讯云</a> <a href="/tags/%E8%87%AA%E5%BE%8B/" style="font-size: 10px;">自律</a> <a href="/tags/%E8%A5%BF%E5%B0%91%E7%88%B7/" style="font-size: 10px;">西少爷</a> <a href="/tags/%E8%A7%86%E9%A2%91/" style="font-size: 10px;">视频</a> <a href="/tags/%E8%B0%B7%E6%AD%8C%E9%AA%8C%E8%AF%81%E7%A0%81/" style="font-size: 10px;">谷歌验证码</a> <a href="/tags/%E8%BF%90%E8%90%A5/" style="font-size: 10px;">运营</a> <a href="/tags/%E8%BF%9C%E7%A8%8B/" style="font-size: 10px;">远程</a> <a href="/tags/%E9%80%86%E5%90%91/" style="font-size: 10px;">逆向</a> <a href="/tags/%E9%85%8D%E7%BD%AE/" style="font-size: 10px;">配置</a> <a href="/tags/%E9%87%8D%E8%A3%85/" style="font-size: 10px;">重装</a> <a href="/tags/%E9%98%BF%E6%9D%9C/" style="font-size: 10px;">阿杜</a> <a href="/tags/%E9%9D%99%E8%A7%85/" style="font-size: 17.5px;">静觅</a> <a href="/tags/%E9%A2%A0%E8%A6%86/" style="font-size: 10px;">颠覆</a> <a href="/tags/%E9%A3%9E%E4%BF%A1/" style="font-size: 10px;">飞信</a> <a href="/tags/%E9%B8%BF%E8%92%99/" style="font-size: 10px;">鸿蒙</a>
              </div>
              <script>
                const tagsColors = ['#00a67c', '#5cb85c', '#d9534f', '#567e95', '#b37333', '#f4843d', '#15a287']
                const tagsElements = document.querySelectorAll('.sidebar-panel-tags .content a')
                tagsElements.forEach((item) =>
                {
                  item.style.backgroundColor = tagsColors[Math.floor(Math.random() * tagsColors.length)]
                })

              </script>
            </div>
            <div class="sidebar-panel sidebar-panel-categories sidebar-panel-active">
              <h4 class="name"> 分类 </h4>
              <div class="content">
                <ul class="category-list">
                  <li class="category-list-item"><a class="category-list-link" href="/categories/C-C/">C/C++</a><span class="category-list-count">23</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a><span class="category-list-count">14</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a><span class="category-list-count">5</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">26</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">15</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Markdown/">Markdown</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Net/">Net</a><span class="category-list-count">4</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Other/">Other</a><span class="category-list-count">39</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/PHP/">PHP</a><span class="category-list-count">27</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Paper/">Paper</a><span class="category-list-count">2</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/Python/">Python</a><span class="category-list-count">261</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a><span class="category-list-count">2</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E5%B1%95%E7%A4%BA/">个人展示</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%97%A5%E8%AE%B0/">个人日记</a><span class="category-list-count">9</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E8%AE%B0%E5%BD%95/">个人记录</a><span class="category-list-count">4</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E9%9A%8F%E7%AC%94/">个人随笔</a><span class="category-list-count">15</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%AE/">安装配置</a><span class="category-list-count">59</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E6%8A%80%E6%9C%AF%E6%9D%82%E8%B0%88/">技术杂谈</a><span class="category-list-count">88</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9C%AA%E5%88%86%E7%B1%BB/">未分类</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E7%94%9F%E6%B4%BB%E7%AC%94%E8%AE%B0/">生活笔记</a><span class="category-list-count">1</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E7%A6%8F%E5%88%A9%E4%B8%93%E5%8C%BA/">福利专区</a><span class="category-list-count">6</span></li>
                  <li class="category-list-item"><a class="category-list-link" href="/categories/%E8%81%8C%E4%BD%8D%E6%8E%A8%E8%8D%90/">职位推荐</a><span class="category-list-count">2</span></li>
                </ul>
              </div>
            </div>
            <div class="sidebar-panel sidebar-panel-friends sidebar-panel-active">
              <h4 class="name"> 友情链接 </h4>
              <ul class="friends">
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/j2dub.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.findhao.net/" target="_blank" rel="noopener">FindHao</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ou6mm.jpg">
                  </span>
                  <span class="link">
                    <a href="https://diygod.me/" target="_blank" rel="noopener">DIYgod</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/6apxu.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.51dev.com/" target="_blank" rel="noopener">IT技术社区</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://www.jankl.com/img/titleshu.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.jankl.com/" target="_blank" rel="noopener">liberalist</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/bqlbs.png">
                  </span>
                  <span class="link">
                    <a href="http://www.urselect.com/" target="_blank" rel="noopener">优社电商</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/8s88c.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.yuanrenxue.com/" target="_blank" rel="noopener">猿人学</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/2wgg5.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.yunlifang.cn/" target="_blank" rel="noopener">云立方</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/shwr6.png">
                  </span>
                  <span class="link">
                    <a href="http://lanbing510.info/" target="_blank" rel="noopener">冰蓝</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/blvoh.jpg">
                  </span>
                  <span class="link">
                    <a href="https://lengyue.me/" target="_blank" rel="noopener">冷月</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="http://qianxunclub.com/favicon.png">
                  </span>
                  <span class="link">
                    <a href="http://qianxunclub.com/" target="_blank" rel="noopener">千寻啊千寻</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/0044u.jpg">
                  </span>
                  <span class="link">
                    <a href="http://kodcloud.com/" target="_blank" rel="noopener">可道云</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ygnpn.jpg">
                  </span>
                  <span class="link">
                    <a href="http://www.kunkundashen.cn/" target="_blank" rel="noopener">坤坤大神</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/22uv1.png">
                  </span>
                  <span class="link">
                    <a href="http://www.cenchong.com/" target="_blank" rel="noopener">岑冲博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ev9kl.png">
                  </span>
                  <span class="link">
                    <a href="http://www.zxiaoji.com/" target="_blank" rel="noopener">张小鸡</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://www.503error.com/favicon.ico">
                  </span>
                  <span class="link">
                    <a href="https://www.503error.com/" target="_blank" rel="noopener">张志明个人博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/x714o.jpg">
                  </span>
                  <span class="link">
                    <a href="http://www.hubwiz.com/" target="_blank" rel="noopener">汇智网</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/129d8.png">
                  </span>
                  <span class="link">
                    <a href="https://www.bysocket.com/" target="_blank" rel="noopener">泥瓦匠BYSocket</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://www.xiongge.club/favicon.ico">
                  </span>
                  <span class="link">
                    <a href="https://www.xiongge.club/" target="_blank" rel="noopener">熊哥club</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/3w4fe.png">
                  </span>
                  <span class="link">
                    <a href="https://zerlong.com/" target="_blank" rel="noopener">知语</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/44hxf.png">
                  </span>
                  <span class="link">
                    <a href="http://redstonewill.com/" target="_blank" rel="noopener">红色石头</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/8g1fk.jpg">
                  </span>
                  <span class="link">
                    <a href="http://www.laodong.me/" target="_blank" rel="noopener">老董博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/wkaus.jpg">
                  </span>
                  <span class="link">
                    <a href="https://zhaoshuai.me/" target="_blank" rel="noopener">碎念</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/pgo0r.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.chenwenguan.com/" target="_blank" rel="noopener">陈文管的博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/kk82a.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.lxlinux.net/" target="_blank" rel="noopener">良许Linux教程网</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/lj0t2.jpg">
                  </span>
                  <span class="link">
                    <a href="https://tanqingbo.cn/" target="_blank" rel="noopener">IT码农</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/i8cdr.png">
                  </span>
                  <span class="link">
                    <a href="https://junyiseo.com/" target="_blank" rel="noopener">均益个人博客</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/chwv2.png">
                  </span>
                  <span class="link">
                    <a href="https://brucedone.com/" target="_blank" rel="noopener">大鱼的鱼塘</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/2y43o.png">
                  </span>
                  <span class="link">
                    <a href="http://bbs.nightteam.cn/" target="_blank" rel="noopener">夜幕爬虫安全论坛</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/zvc3w.jpg">
                  </span>
                  <span class="link">
                    <a href="https://www.weishidong.com/" target="_blank" rel="noopener">韦世东的技术专栏</a>
                  </span>
                </li>
                <li class="friend">
                  <span class="logo">
                    <img src="https://qiniu.cuiqingcai.com/ebudy.jpg">
                  </span>
                  <span class="link">
                    <a href="https://chuanjiabing.com/" target="_blank" rel="noopener">穿甲兵技术社区</a>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </aside>
        <div id="sidebar-dimmer"></div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer-inner">
        <div class="copyright"> &copy; <span itemprop="copyrightYear">2021</span>
          <span class="with-love">
            <i class="fa fa-heart"></i>
          </span>
          <span class="author" itemprop="copyrightHolder">崔庆才丨静觅</span>
          <span class="post-meta-divider">|</span>
          <span class="post-meta-item-icon">
            <i class="fa fa-chart-area"></i>
          </span>
          <span title="站点总字数">2.6m</span>
          <span class="post-meta-divider">|</span>
          <span class="post-meta-item-icon">
            <i class="fa fa-coffee"></i>
          </span>
          <span title="站点阅读时长">39:54</span>
        </div>
        <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a> 强力驱动 </div>
        <div class="beian"><a href="https://beian.miit.gov.cn/" rel="noopener" target="_blank">京ICP备18015597号-1 </a>
        </div>
        <script>
          (function ()
          {
            function leancloudSelector(url)
            {
              url = encodeURI(url);
              return document.getElementById(url).querySelector('.leancloud-visitors-count');
            }

            function addCount(Counter)
            {
              var visitors = document.querySelector('.leancloud_visitors');
              var url = decodeURI(visitors.id);
              var title = visitors.dataset.flagTitle;
              Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify(
              {
                url
              }))).then(response => response.json()).then((
              {
                results
              }) =>
              {
                if (results.length > 0)
                {
                  var counter = results[0];
                  leancloudSelector(url).innerText = counter.time + 1;
                  Counter('put', '/classes/Counter/' + counter.objectId,
                  {
                    time:
                    {
                      '__op': 'Increment',
                      'amount': 1
                    }
                  }).catch(error =>
                  {
                    console.error('Failed to save visitor count', error);
                  });
                }
                else
                {
                  Counter('post', '/classes/Counter',
                  {
                    title,
                    url,
                    time: 1
                  }).then(response => response.json()).then(() =>
                  {
                    leancloudSelector(url).innerText = 1;
                  }).catch(error =>
                  {
                    console.error('Failed to create', error);
                  });
                }
              }).catch(error =>
              {
                console.error('LeanCloud Counter Error', error);
              });
            }

            function showTime(Counter)
            {
              var visitors = document.querySelectorAll('.leancloud_visitors');
              var entries = [...visitors].map(element =>
              {
                return decodeURI(element.id);
              });
              Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify(
              {
                url:
                {
                  '$in': entries
                }
              }))).then(response => response.json()).then((
              {
                results
              }) =>
              {
                for (let url of entries)
                {
                  let target = results.find(item => item.url === url);
                  leancloudSelector(url).innerText = target ? target.time : 0;
                }
              }).catch(error =>
              {
                console.error('LeanCloud Counter Error', error);
              });
            }
            let
            {
              app_id,
              app_key,
              server_url
            } = {
              "enable": true,
              "app_id": "6X5dRQ0pnPWJgYy8SXOg0uID-gzGzoHsz",
              "app_key": "ziLDVEy73ne5HtFTiGstzHMS",
              "server_url": "https://6x5drq0p.lc-cn-n1-shared.com",
              "security": false
            };

            function fetchData(api_server)
            {
              var Counter = (method, url, data) =>
              {
                return fetch(`${api_server}/1.1${url}`,
                {
                  method,
                  headers:
                  {
                    'X-LC-Id': app_id,
                    'X-LC-Key': app_key,
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify(data)
                });
              };
              if (CONFIG.page.isPost)
              {
                if (CONFIG.hostname !== location.hostname) return;
                addCount(Counter);
              }
              else if (document.querySelectorAll('.post-title-link').length >= 1)
              {
                showTime(Counter);
              }
            }
            let api_server = app_id.slice(-9) !== '-MdYXbMMI' ? server_url : `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com`;
            if (api_server)
            {
              fetchData(api_server);
            }
            else
            {
              fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id).then(response => response.json()).then((
              {
                api_server
              }) =>
              {
                fetchData('https://' + api_server);
              });
            }
          })();

        </script>
      </div>
      <div class="footer-stat">
        <span id="cnzz_stat_icon_1279355174"></span>
        <script type="text/javascript">
          document.write(unescape("%3Cspan id='cnzz_stat_icon_1279355174'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1279355174%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));

        </script>
      </div>
    </footer>
  </div>
  <script src="//cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
  <script src="/js/utils.js"></script>
  <script src="/.js"></script>
  <script src="/js/schemes/pisces.js"></script>
  <script src="/.js"></script>
  <script src="/js/next-boot.js"></script>
  <script src="/.js"></script>
  <script>
    (function ()
    {
      var canonicalURL, curProtocol;
      //Get the <link> tag
      var x = document.getElementsByTagName("link");
      //Find the last canonical URL
      if (x.length > 0)
      {
        for (i = 0; i < x.length; i++)
        {
          if (x[i].rel.toLowerCase() == 'canonical' && x[i].href)
          {
            canonicalURL = x[i].href;
          }
        }
      }
      //Get protocol
      if (!canonicalURL)
      {
        curProtocol = window.location.protocol.split(':')[0];
      }
      else
      {
        curProtocol = canonicalURL.split(':')[0];
      }
      //Get current URL if the canonical URL does not exist
      if (!canonicalURL) canonicalURL = window.location.href;
      //Assign script content. Replace current URL with the canonical URL
      ! function ()
      {
        var e = /([http|https]:\/\/[a-zA-Z0-9\_\.]+\.baidu\.com)/gi,
          r = canonicalURL,
          t = document.referrer;
        if (!e.test(r))
        {
          var n = (String(curProtocol).toLowerCase() === 'https') ? "https://sp0.baidu.com/9_Q4simg2RQJ8t7jm9iCKT-xh_/s.gif" : "//api.share.baidu.com/s.gif";
          t ? (n += "?r=" + encodeURIComponent(document.referrer), r && (n += "&l=" + r)) : r && (n += "?l=" + r);
          var i = new Image;
          i.src = n
        }
      }(window);
    })();

  </script>
  <script src="/js/local-search.js"></script>
  <script src="/.js"></script>
</body>

</html>
